--- title: "Aspect Ratio Calculator - Calculate a ratio or the matching size | Web ToolBox" description: "Calculate the aspect ratio from a width and height, or find the matching dimension for a chosen ratio. Presets such as 16:9 and 4:3 are included, and the result can be copied as a CSS aspect-ratio value or a Tailwind class." canonical_url: "https://web-toolbox.dev/en/tools/aspect-ratio-calculator" meta: author: K "og:description": "Calculate the aspect ratio from a width and height, or find the matching dimension for a chosen ratio. Presets such as 16:9 and 4:3 are included, and the result can be copied as a CSS aspect-ratio value or a Tailwind class." "og:image": "https://web-toolbox.dev/og/en/tools/aspect-ratio-calculator-8726d607.png" "og:image:alt": "Aspect Ratio Calculator" "og:image:height": "630" "og:image:width": "1200" "og:title": "Aspect Ratio Calculator - Calculate a ratio or the matching size | Web ToolBox" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **Aspect Ratio Calculator** Convert between ratio and dimensions ## **Ratio** **16:9**
Decimal ratio
**1.78:1**
Orientation
**Landscape**
## **Code** Code format ``` aspect-ratio: 16 / 9; ``` ## What is Aspect Ratio Calculator? Aspect Ratio Calculator finds the aspect ratio of a width and height, or calculates the matching dimension for a chosen ratio. It is useful for checking the proportions of images and videos, resizing thumbnails and social media images, and turning a ratio into CSS or Tailwind code. Results update as you type, and the ratio is shown both as a simplified label and as a decimal value. ## How to Use 1. Enter the width and height. 2. Turn on “Lock ratio” when you want to change one dimension while keeping the current ratio. 3. Choose a preset ratio, or select “Custom” to enter your own. 4. Copy the CSS or Tailwind code if you need it. ### Code Switch between the CSS `**aspect-ratio**` value and the Tailwind class, then copy the code you need. ## Main Settings ### Lock Ratio When enabled, changing one dimension calculates the other from the current ratio. When disabled, the ratio is calculated from the width and height. The option is off by default. ### Ratio Presets Choose a preset for a common ratio. Selecting a preset applies the ratio using the larger of the current dimensions. Choosing a portrait preset for a landscape size, for example, keeps the long side and swaps the orientation. ### Custom Ratio For a ratio that is not in the presets, enter the width and height terms as integers. For example, `**16**` and `**9**` are treated as 16:9. Changing a term updates the dimensions using the larger of the current dimensions. ### Swap Dimensions Swaps the width and height. When the ratio is locked, the direction of the ratio is swapped as well. ## Use Cases - Checking whether an image or video is 16:9, 4:3, or another ratio - Finding a width or height that keeps the ratio for a social media image or thumbnail - Converting a design ratio into a CSS or Tailwind value - Checking the size of a vertical version of a video ## Things to Keep in Mind - Dimensions are handled as integers from 1 to 100000 - When the ratio is locked, changing a dimension rounds the result to an integer, so the ratio can shift slightly ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/aspect-ratio-calculator#webpage","@type":"WebPage","description":"Calculate the aspect ratio from a width and height, or find the matching dimension for a chosen ratio. Presets such as 16:9 and 4:3 are included, and the result can be copied as a CSS aspect-ratio value or a Tailwind class.","name":"Aspect Ratio Calculator - Calculate a ratio or the matching size","url":"https://web-toolbox.dev/en/tools/aspect-ratio-calculator","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/aspect-ratio-calculator"]}]},{"@id":"https://web-toolbox.dev/en/tools/aspect-ratio-calculator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Calculate the aspect ratio from a width and height, or find the matching dimension for a chosen ratio. Presets such as 16:9 and 4:3 are included, and the result can be copied as a CSS aspect-ratio value or a Tailwind class.","name":"Aspect Ratio Calculator - Calculate a ratio or the matching size","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.