FIRST CH TOOLS LOCAL PROCESSING — NOTHING IS UPLOADED 日本語

FIRST CH TOOLS / 27 ASPECT RATIO

Aspect Ratio Calculator & Responsive Size

Pick 16:9 or 4:3, then type a width to get the height, or a height to get the width. You can also work backwards from a size to a ratio, and copy out the aspect-ratio: 16 / 9; CSS snippet along with a height table for every breakpoint.

Pick a ratio, fill in one side, get the other

Common ratios
Width
px
Height
px
Common widths
1280
Width (px)
720
Height (px)
16:9
Ratio (simplified)
1.7778
As a decimal
Ready to paste

    
    
  
    

  
    Everything is calculated inside this page — nothing you type leaves the browser. Directly callable via URL parameters: /en/aspect-ratio/?ratio=16:9&w=1280 or /en/aspect-ratio/?w=1920&h=1080
    
  
    

  

  

  

  
    
    
    How to Use
    
    
      
      
    1. Pick a ratioPress 16:9 or 9:16, or type into the two boxes. A decimal such as 1.85 is fine too — it simplifies to 37:20.
      2. 
      
    2. Type a width or a heightFill in either one and the other follows instantly. For video, set the rounding to “nearest even number”.
      3. 
      
    3. Copy the CSSThe “CSS” tab writes out the aspect-ratio snippet and the matching HTML; the “Breakpoints” tab exports the height for every width at once.
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    An aspect ratio is the width compared with the height. 16:9 means “9 tall for every 16 across”, so the height is width × 9 ÷ 16 — a width of 1280px gives 1280 × 9 ÷ 16 = 720px. Going the other way, divide both sides by their greatest common divisor and you have the ratio.
    
    
    In CSS, aspect-ratio holds the shape without you writing a height. It has been available across browsers since 2021: aspect-ratio: 16 / 9; keeps the box in shape whatever the width turns out to be. Before that the standard trick was padding-top: 56.25%, which works because a percentage padding is measured against the width of the parent.
    
    
    
      
    Always write width and height on an image
    
      
    Even with width: 100%; height: auto; in your CSS, keep the HTML width and height attributes. The browser divides one by the other to reserve the right amount of space before the image arrives. Without them the page grows when the image lands and everything below is pushed down — that is exactly what CLS in Core Web Vitals measures. Put the intrinsic size in the attributes; CSS still decides how big it is drawn.
    
    
    
    
    
      
    Video dimensions have to be even
    
      
    H.264 and H.265 store colour at half the resolution in each direction (YUV 4:2:0), so an odd width or height leaves half a chroma sample and encoders either refuse the input or silently pad it. A “round” width often produces an odd height — 1366px at 16:9 is 768.375 — so switch the rounding to “nearest even number” whenever the output is a video.
    
    
    
    
    
      
    A 21:9 monitor is not 21:9
    
      
    The ultrawide sold as 21:9 is 2560×1080, which simplifies to 64:27 (2.370), or 3440×1440, which is 43:18 (2.389). True 21:9 is 2.333, so writing it in CSS leaves a pixel of gap or crop on a real screen. Marketing ratios and real ratios differ — when in doubt, put the actual resolution into the “Ratio & fit” tab.
    
    
    
    
    
      
    cover crops, contain leaves bars
    
      
    When the box and the image disagree, object-fit: cover or contain decides who gives way. cover fills the box and cuts off the overflow; contain shows everything and pays for it with bars at the top and bottom (letterbox) or on the sides (pillarbox). The “Ratio & fit” tab tells you how many pixels are lost or added before you commit, and object-position moves the crop away from a face.
    
    
    
    
    
      
    Remember social sizes as ratios
    
      
    The 1200×630 OGP image is 40:21 (about 1.91:1), Instagram portrait is 1080×1350 = 4:5, and Stories, Reels and TikTok are 9:16. Platforms change their recommended pixel counts far more often than their ratios, so keeping the ratio in mind makes it easy to render a higher-resolution version or to check how a crop will land.
    
    
    
    
    
      
    Decimal ratios simplify too
    
      
    Cinema flat 1.85:1 is 37:20 and anamorphic scope 2.39:1 is 239:100. This tool multiplies by as many powers of ten as you typed decimals and then divides by the greatest common divisor, so a decimal still gives you whole numbers. aspect-ratio does accept a single number (aspect-ratio: 1.85;), but two integers say what you meant.
    
    
    
  
    

  
    
    
    From AI Agents
    
    
    This calculation is also available as the aspect_ratio_calc tool of the MCP (Model Context Protocol) server @first-ch/tools-mcp, so an AI agent can call it directly without a browser. See Using these tools from AI agents for setup.
    
    
    Setup
    
    
    claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp
    
    
    Examples
    
    
    # the height for a width of 1280 at 16:9
aspect_ratio_calc(ratio="16:9", width=1280)

# what ratio is 1920×1080 (simplified, closest common ratio, orientation)
aspect_ratio_calc(width=1920, height=1080)

# a height table for a set of breakpoints, plus the CSS
aspect_ratio_calc(ratio="16:9", widths=[320, 768, 1280, 1920], snippet=true)

# how much is cropped fitting 1920×1080 into a 1280×400 box with cover
aspect_ratio_calc(width=1920, height=1080, box="1280x400", fit="cover")
    
  
    

  
    
    
    Other Tools