Aspect Ratio Calculator for Mobile App Screens

Use an aspect ratio calculator to define each image container by width-to-height ratio, not a fixed pixel height: use 16:9 for wide media, 4:3 or 3:2 for editorial cards, 1:1 for grids, and 9:16 for vertical stories. Test full-bleed screens at 19.5:9 and 20:9, where the taller 20:9 viewport reveals or crops more art depending on the fill rule. Keep the focal subject inside the centre 80% of every source image, leaving 10% clearance at each edge.

Key takeaways

• •A 20:9 viewport is 2.56% taller than a 19.5:9 viewport at the same width.
• •Use 16:9 for wide video and media previews, and 9:16 for vertical stories or reels.
• •Keep focal subjects in the centre 80% of an image, leaving 10% clearance on every edge.
• •CSS uses aspect-ratio; Android ConstraintLayout uses layout_constraintDimensionRatio; SwiftUI uses aspectRatio(_:contentMode:).
• •Calculate height as width ÷ (ratio width ÷ ratio height).

This guide is for mobile UI/UX designers, founders and engineers who can already build responsive iOS and Android layouts.

Time: 25 minutes · You'll need: A list of hero, card and thumbnail image slots, Figma, Sketch, or another mobile UI canvas, iOS Simulator and Android Emulator, A source image with an identified focal subject, floow.design Aspect Ratio Calculator or a calculator app

What's on this page

1. •Map each image slot to its crop behaviour
2. •Calculate the container dimensions manually
3. •Test full-bleed art at 19.5:9 and 20:9
4. •Set an aspect-ratio rule instead of fixed hero height
5. •Protect the centre 80% safe crop zone
6. •Reference table

• •Common mistakes
• •FAQs

Choose mobile aspect ratios, step by step

1. Map each image slot to its crop behaviour

List every image container before choosing dimensions: a launch or profile hero, feed card, search-result thumbnail, video preview and story. Give each slot one ratio and one crop mode. Use 16:9 for wide video, media headers and landscape previews; it matches common video delivery. Use 4:3 for editorial or product cards when the image needs more vertical room. Use 3:2 for photography-led cards with a slightly wider frame. Use 1:1 for dense grids and avatars, where equal row heights matter. Use 9:16 for full-height stories, reels and portrait media.

Do not reuse a 9:16 source as a 16:9 card without an explicit crop decision. The same image can serve both slots only when the focal subject survives both frames. For a card aspect ratio, consistency across a feed is usually more valuable than showing every pixel of each source image.

Tip: Use a separate 1:1 derivative for a grid when the 16:9 card crop cuts through faces or product labels.

2. Calculate the container dimensions manually

Write a ratio as W:H, then calculate the missing side from the known side. For a 16:9 card that is 360 dp wide, calculate height as 360 ÷ 16 × 9 = 202.5 dp. For a 4:3 card at 360 dp, calculate 360 ÷ 4 × 3 = 270 dp. For a 3:2 card at 360 dp, calculate 360 ÷ 3 × 2 = 240 dp.

The same rule works from height: a 9:16 story that is 640 dp high needs 640 ÷ 16 × 9 = 360 dp wide. Round only where the rendering system requires an integer pixel; retain the ratio in the layout rule. Use floow.design’s free Aspect Ratio Calculator at /free-tools/aspect-ratio-calculator to work out a missing width or height and check common phone and store ratios, but keep the formula in the design specification so an engineer can verify it without the tool.

Tip: Specify both the ratio and the crop mode in handoff, such as 4:3, centerCrop, rather than supplying only exported pixel dimensions.

3. Test full-bleed art at 19.5:9 and 20:9

Create two portrait viewport frames with the same width: 19.5:9 and 20:9. A 19.5:9 screen has a width-to-height value of about 2.167; 20:9 is about 2.222. At equal width, a 20:9 viewport is 2.56% taller than a 19.5:9 viewport. This difference matters when a background image fills the entire screen behind a title, bottom action or navigation chrome.

With an image that uses a fill crop such as iOS .fill, Android ContentScale.Crop, or CSS object-fit: cover, the container is fully covered and some source pixels may be cropped. With a fit mode, the full image remains visible but empty space can appear. For full-bleed art, design the background to tolerate the extra vertical exposure or crop at 20:9; do not pin a meaningful visual detail to the top or bottom edge.

Tip: Test a hero with its real title, primary button and system bars visible; an art-only frame cannot reveal collisions with interface content.

4. Set an aspect-ratio rule instead of fixed hero height

Define a hero by its width and ratio when its height should scale with the phone width. A fixed 280 dp hero is always 280 dp tall; on a tall 20:9 phone it can leave an unintended visual gap or make the lower content start too early relative to full-screen art. A 16:9 hero at a width of 360 dp resolves to 202.5 dp; at 412 dp, it resolves to 231.75 dp. The shape remains predictable because both dimensions change together.

On CSS-based mobile surfaces, use aspect-ratio: 16 / 9 on the container and use object-fit: cover on the image when cropping is intended. In Android Views with ConstraintLayout, use layout_constraintDimensionRatio="16:9" with the relevant dimension constrained. In Jetpack Compose, use Modifier.aspectRatio(16f / 9f). In SwiftUI, use aspectRatio(16/9, contentMode: .fill) and clip the view when needed. In UIKit Auto Layout, create a width-to-height constraint with a multiplier of 16:9.

Tip: A fixed height is still appropriate for a deliberately fixed control, such as a 56 dp Material button; it is a poor default for responsive image media.

5. Protect the centre 80% safe crop zone

Draw an inner rectangle that is 80% of the source image width and 80% of its height. This leaves a 10% margin at the top, bottom, left and right. Keep faces, product silhouettes, logos, price labels and other required content inside that centre 80% zone. Treat this as an asset-production rule, not as an iOS or Android safe-area inset.

Apply the rule before creating derivatives. For a 1600 × 900 px 16:9 source, the centre safe zone is 1280 × 720 px, inset by 160 px horizontally and 90 px vertically. For a 1:1 crop, check the subject again: centre-safe content may survive a wide crop but still fail a square one. If a subject cannot fit inside the zone, commission a second crop rather than shrinking the subject until the image loses impact.

Tip: Do not place text baked into an image near the safe-zone boundary; translated strings and crop changes make it less reliable than live interface text.

Reference table

Ratios and mobile image jobs

Do it with the free Aspect Ratio Calculator

Work out the missing width or height for any ratio, with the common phone and store ratios one click away.

Open the Aspect Ratio Calculator → — free, no sign-up.

Common mistakes

Giving engineers a 360 × 240 export without naming its 3:2 ratio.

Specify 3:2 as the layout constraint and treat 360 × 240 as one reference size. The layout then scales correctly at other widths.

Using a fixed-height hero for a full-bleed screen.

Use a width-derived aspect ratio for the image region, then test it at 19.5:9 and 20:9. Reserve fixed heights for intentionally fixed UI controls.

Assuming cover preserves the whole source image.

cover` fills the container by cropping overflow. Keep required imagery in the centre 80% safe crop zone or provide a tailored derivative.

Using one crop for a 9:16 story and a 1:1 feed tile.

Create separate crops when the focal subject cannot sit safely in both frames. A single master source does not require a single published crop.

Frequently asked questions

What is the best mobile aspect ratio for a hero image?

A 16:9 hero is a reliable default for wide media, but the best mobile aspect ratio is the one that matches the content and survives your target crops. Use 9:16 when the hero is intentionally vertical and immersive. Define the container with a ratio rather than a fixed height, then inspect it at both 19.5:9 and 20:9 screen shapes.

How do I calculate an image ratio for app design?

Calculate an image dimension by dividing the known side by the first ratio number and multiplying by the second. A 360 dp-wide 4:3 card is 360 ÷ 4 × 3, or 270 dp high. If height is known instead, reverse the ratio direction: a 640 dp-high 9:16 frame is 360 dp wide.

What card aspect ratio should I use in a mobile app?

Use 4:3 for editorial and product cards, 3:2 for photography-led cards, and 1:1 for dense grids that need equal row heights. The correct card aspect ratio depends on how much vertical subject matter must remain visible. Keep one ratio per card family so scrolling rows do not jump in height while images load.

Why does my full-screen image crop differently on Android phones?

Your full-screen image crops differently because Android phones can have different viewport shapes, including 19.5:9 and 20:9. With a fill crop such as ContentScale.Crop, the image covers each container and the overflow is removed. Test the same asset on both ratios and keep required content within the centre 80% of the source frame.

What is the iOS equivalent of CSS aspect-ratio?

SwiftUI’s aspectRatio(_:contentMode:) is the direct iOS equivalent of CSS aspect-ratio for sizing and fitting views. Use .fill when the image should cover its container and clip it where required. In UIKit Auto Layout, express the relationship with a width-to-height constraint multiplier.

Where this leaves you

Choose ratios by the image’s job, then make the layout enforce that ratio at every width. Use 16:9 for wide media, 4:3 or 3:2 for cards, 1:1 for grids and 9:16 for vertical content. The ratio protects the container shape; the centre 80% safe zone protects the important part of the image when fill cropping changes across 19.5:9 and 20:9 screens. Do not approve a hero from one device frame alone. Your next action is to put every image slot in a ratio inventory, calculate its reference dimensions, and test its source art in both tall-screen viewports.

---

Design the screens first

Describe the screen you need in plain English and floow.design generates production-ready iOS and Android layouts you can iterate on by chat, then export to Figma or code. Design your mobile app screens in floow.design first, then build.

Start designing free →

---

Related

• •Device Size Reference — Screen dimensions, density and safe areas for current handsets — searchable, and exportable as code.
• •px to rem Converter — Convert pixels to rem, em, pt, dp and sp, with every density export size and a full token scale.
• •px to rem Converter: Convert px to dp and pt — Use a px to rem converter method to translate mobile spacing into Android dp, iOS pt and w
• •iPhone Screen Sizes for Design: 2026 Reference — iPhone screen sizes for design: choose a 393 pt canvas, set @2x and @3x assets, and test s
• •Gemini 3.1 for Mobile App UI Design: 4 Real Prompts Tested Hands-On (2026) — I tested Gemini 3.1 Pro with 4 real mobile app UI prompts — fitness tracker, food delivery

Sources

• •W3C CSS Sizing Module Level 4 — Aspect Ratios
• •Android Developers — ConstraintLayout
• •Android Developers — Compose layout modifiers
• •Apple Developer Documentation — View.aspectRatio(_:contentMode:)
• •Apple Developer Documentation — Auto Layout