Inspect the working example
The empty stage is240px wide with aspect-ratio 16/9. Its height is automatic. This reserves layout space only; no image is loaded, cropped or exported.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Initial width | 240×9/16 | Height 135px |
| Narrower box | Change width to160 | Height 90px |
| Content result | Inspect source | No image or image-fit result is claimed |
Follow the browser mechanism
aspect-ratio supplies a preferred ratio used when an auto size can be resolved from another size. It is not a command to override two definite dimensions. The measured box result is distinct from the existing proportional containment worksheet.
Two definite dimensions override the auto-size use
The alternative adds height 100px while retaining width 240 and the ratio.
<style>body{margin:8px}</style>
<style>.stage{width:240px;height:100px;aspect-ratio:16/9;background:#e3efe8}</style><section class="stage" aria-label="Reserved preview area"></section>The measured box is240×100, not 240×135.
Try the repair
For an auto-height stage 320px wide, what height follows from 16:9?
Show the worked answer
180px:320×9/16. This is a box dimension, not an exported image size.
- Measure box width and height rather than an imagined image rendition.
- Keep at least one dimension automatic for this ratio task.