{"uid":"cap_eA-frvx3wIB3DvBc-ovgg","slug":"css-design-calc-aspect-ratio-calculator-f7d0decf","name":"CSS Design Calc – Aspect Ratio Calculator","description":"Aspect ratio of a width and height (simplified, nearest common ratio) or the missing side for a ratio, with CSS values.","url":"https://css-design-calc.x402tookit.com/aspect-ratio?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":[],"properties":{"ratio":{"type":"string","description":"Ratio such as 16:9, 4/3 or 1.778 (with width or height to find the other side)"},"width":{"type":"number","description":"Width in any unit"},"height":{"type":"number","description":"Height in any unit"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"asOf":{"type":["null","string"]},"width":{"type":["null","number"]},"height":{"type":["null","number"]},"source":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"degraded":{"type":["boolean","null"]},"disclaimer":{"type":["null","string"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"simplified":{"type":["null","string"]},"derivedSide":{},"orientation":{"type":["null","string"]},"commonRatios":{"type":["array","null"],"items":{"type":"string"}},"ratioDecimal":{"type":["null","number"]},"cssAspectRatio":{"type":["null","string"]},"paddingTopPercent":{"type":["null","number"]},"nearestCommonRatio":{"type":["null","string"]},"nearestCommonDifferencePercent":{"type":["null","number"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_LwHU4_xAhnI8b81ex4uM5","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Calculates the simplified aspect ratio of a width/height pair, or derives the missing dimension from a known ratio, and returns CSS-ready values including css-aspect-ratio and padding-top percent.","exampleAgentPrompt":"What is the simplified aspect ratio for an image that's 1920px wide and 1080px tall, and give me the CSS aspect-ratio value and padding-top percentage I can use in my stylesheet?","exampleUseCases":[{"title":"Responsive iframe padding-top hack","prompt":"I have a video embed that's 1280 by 720 pixels — what's the padding-top percentage I should use to keep it responsive, and what's the nearest common ratio?"},{"title":"Derive missing dimension from ratio","prompt":"I know my banner needs to follow a 16:9 ratio and the width is 960px — can you calculate the correct height for me and give me the CSS aspect-ratio string?"},{"title":"Identify ratio for arbitrary dimensions","prompt":"My designer gave me a container that's 1350 wide and 900 tall. What's the simplified aspect ratio, the nearest standard ratio like 4:3 or 3:2, and how far off is it as a percentage?"}],"resultDescription":"Returns the simplified ratio (e.g. '16:9'), nearest common ratio from a list of standard ratios, how close the input is to that common ratio as a percentage difference, the CSS aspect-ratio property string (e.g. '16 / 9'), the padding-top percent for the old percentage-padding responsive trick, the ratio as a decimal number, orientation (landscape/portrait/square), and optionally the derived missing side when only one dimension and a ratio are supplied.","failureModes":["Missing both ratio and at least one dimension — returns error or empty result","Ratio string in unrecognised format — may fail to parse","Width or height of zero or negative — undefined mathematical result","Providing only a ratio with no width or height — cannot derive a missing side","Network or service downtime — HTTP error response"],"whenToPreferThis":"Choose this endpoint when you need CSS-specific aspect ratio outputs (the css-aspect-ratio string and padding-top percent) rather than a plain ratio simplification. It is particularly useful when building responsive layouts and needing to cross-reference against common named ratios like 16:9, 4:3, or 3:2 in a single call. Prefer this over generic math tools when the output needs to feed directly into CSS properties.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-30T00:35:07.950Z","isFirstParty":false,"canonicalSlug":"css-design-calc-aspect-ratio-calculator-f7d0decf"}