Safari Images Ignore Your Chosen Ratio? Check aspect-ratio and auto
A card that starts at 16:9 grows taller once the photo finishes loading. Which aspect-ratio value holds the shape, and when does auto take over?
- At least one dimension must be automatic for aspect-ratio to affect sizing.
- auto 16 / 9 uses the natural image ratio once that becomes available.
- Choose the box shape with aspect-ratio and the crop behavior with object-fit.
Start with the dimensions, not another ratio value
An image with a fixed 320px width and 320px height will not become widescreen just because you add aspect-ratio: 16 / 9. The property participates in automatic sizing; it needs at least one automatic dimension to affect the preferred size.
| Current setup | Next check |
|---|---|
| Both dimensions are definite. | Decide which dimension should be automatic. |
| The ratio includes auto. | Check whether returning to the natural image ratio is intended. |
| Both width and height are auto. | Compare intrinsic sizing and the specific Safari fix. |
CSS Sizing 4 defines a preferred ratio, not an unconditional geometry lock. Minimum and maximum size constraints can also affect the result.
Give the card a shape, then choose the crop
A common card treatment lets width follow the container and calculates height from the desired ratio:
.card-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}object-fit: cover preserves the photo's proportions while filling the box, cropping content where necessary. Use contain if the entire photo must remain visible and empty space is acceptable. Neither choice replaces the box-sizing decision.
Check for other rules imposing a fixed or minimum height before changing the example's ratio. A declaration elsewhere in the component can still constrain the result.
A ratio with auto can change after loading
aspect-ratio: auto 16 / 9 uses the supplied ratio until an image's natural ratio is available, then uses that natural ratio. Omitting auto keeps the supplied ratio as the preferred one.
As Jake Archibald explains, HTML width and height attributes can reserve space before an image loads. Supplying accurate source dimensions with CSS height: auto serves a different goal from cropping every card into an identical shape. Decide whether the source photo or the card design should determine the proportions.
Test Safari’s fix when both dimensions are auto
Safari Technology Preview 255, released October 22, fixes replaced elements ignoring aspect-ratio when both width and height are auto. That is a specific sizing condition, not a general absence of aspect-ratio support.
Compare the same image and rules in the preview if that condition matches. The macOS preview release does not establish that every stable Safari or iPhone has the fix. Record the affected browser version and the before-and-after-load behavior. Fixing an unintended fixed height, preserving an image's natural ratio and testing an engine bug are different next steps.