Aspect-ratio expresses a preferred inline-to-block size relationship for a box. It influences automatic sizing; when both dimensions are fixed, those explicit sizes take precedence.
Make this comfortable
CSS aspect-ratio: reserve a stable box without fixing both dimensions
When to use it
A case attachment list includes image previews of different original shapes. Give each preview frame a 4-to-3 box so the list remains stable while assets load, then use object-fit to control whether the image content crops inside that frame. The HTML image should still include its own width and height when known, since those dimensions help the browser reserve space even if CSS fails. Keep the full evidence image available through the record view; a cropped thumbnail is only a preview. The frame's ratio does not guarantee content fits if captions are placed inside it, so keep captions outside the cropped media box. Test a portrait, a panorama, and a failed image request. At narrow width, let the frame's inline size shrink with its container.
.attachment-preview { inline-size: min(100%, 18rem); aspect-ratio: 4 / 3; overflow: hidden; background: #e7edf1; }
.attachment-preview img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }Cost and verification
The ratio can reduce layout shifts by reserving a predictable preview box, but it cannot reduce image download bytes. Serve appropriately sized files and measure the actual layout shift if this is a performance goal. Cropping with object-fit is a visual decision; it must not make the preview the only way to inspect evidence. Aspect-ratio has little calculation cost for a simple box. Do not set both inline and block sizes to fixed values and expect the ratio to override them. Keep captions, controls, and status outside the clipping frame so they remain readable.
Common Mistakes
- Do not mistake a cropped preview for the complete evidence image.
- Do not fix both dimensions and expect aspect-ratio to choose a size.
- Do not hide captions inside an overflow-clipped media frame.
Connected lessons
css
reference
web