CSS的aspect-ratio屬性用於控制元素寬高比，確保不同屏幕尺寸下媒體元素保持比例。 1. 常用於視頻、圖片容器，如設(shè)置aspect-ratio: 16 / 9以維持比例。 2. 可防止頁(yè)面加載時(shí)因媒體尺寸未定導(dǎo)致的佈局偏移。 3. 能與Flexbox或Grid等佈局方式結(jié)合使用，如設(shè)置aspect-ratio: 1實(shí)現(xiàn)正方形圖像。 4. 使用時(shí)需注意寬度和高度定義可能引發(fā)的衝突，並建議跨瀏覽器測(cè)試。

The aspect-ratio property in CSS is used to control the ratio between an element's width and height. It helps maintain a specific shape regardless of the content or screen size, which is especially useful for media like images, videos, and containers that need to preserve proportions.

Responsive Media Containers

One of the most common uses of aspect-ratio is making sure media elements like videos or image galleries keep their proportions on different devices.
For example, a video might look stretched or cut off if its container doesn't match its native aspect ratio. By setting something like aspect-ratio: 16 / 9 , you ensure the container stays in that proportion no matter how the screen size changes.
This can be applied directly to a <div> wrapping the video or even to the video element itself.<h3 id="Preventing-Layout-Shifts"> Preventing Layout Shifts</h3> <p> Another benefit of using <code>aspect-ratio is preventing layout shifts when images or videos are loading.
Without it, the browser might not know the space needed for the media until it loads, causing other page elements to shift around.
Setting an explicit aspect ratio reserves the correct space ahead of time.
Here's how it works:

• You define aspect-ratio: 4 / 3 on an image container.
• The browser allocates space based on the parent width.
• Even before the image loads, the space is preserved, avoiding visual jumps.

Combining with Other Layout Techniques

You can use aspect-ratio together with modern layout methods like Flexbox or Grid without issues.
For instance, placing an image inside a grid cell and giving it aspect-ratio: 1 makes it square while still respecting the grid's alignment rules.
Also, it works well with responsive units like percentages or viewport units, letting the element scale naturally while keeping its shape.

Some things to keep in mind:

• If both width and height are defined, aspect-ratio will respect those unless it conflicts with constraints from layout parents.
• Auto-sized elements may behave differently across browsers, so testing is a good idea.

So yeah, aspect-ratio is a simple but powerful tool to keep elements looking right across different screen sizes and prevent layout jarring — basically a quiet hero in responsive design.