aspect-ratio 可以指定元素的宽高比。很多时候我们没法提前确定元素的尺寸,比如在一些自适应布局中,又想确定元素的宽高比,那么就可以使用 aspect-ratio

比如以下例子中,图片的宽高比就被固定为 169

<img class="image" src="https://3yya.com/jinji.jpg" />
<style>
    .image {
        width: 100%;
        aspect-ratio: 16 / 9;

        object-fit: cover;
    }
</style>

$$demo

<img class="image" src="https://3yya.com/jinji.jpg" /> <style> .image { width: 100%; aspect-ratio: 16 / 9;

    object-fit: cover;
}

</style>

$$