Aspect Fit / Cover Calculator
How an image fits in a box, exactly like CSS object-fit.
Rendered width
800
Rendered height
450
Scale factor: 0.417× (41.7%)
Letterbox bars
Horizontal bar (each side)0.0 px
Vertical bar (each side)75.0 px
Same logic as CSS object-fit: contain and cover. Contain shows the whole image but adds bars; cover fills the box but crops. For thumbnails and hero images, cover usually looks better. For logos and product photos, use contain to keep the whole subject visible.
About
Enter image and box dimensions, pick contain or cover. Get the rendered size, the scale factor, and the letterbox bars or cropped pixels. Same logic as CSS object-fit and SwiftUI ContentMode.
How to use
- Enter image and box sizes.
- Pick contain or cover.
- Read rendered size.
FAQ
When to use contain vs cover?+
Use contain when the whole subject must be visible (logos, product photos). Use cover when you want a uniformly filled area and don't mind cropping the edges (hero images, thumbnails).