宽高比

CSS属性aspect-ratio为盒子规定了首选纵横比，这个纵横比可以用于计算auto尺寸以及其他布局函数。

宽高比是指元素的宽度与高度之间的比例关系。在网页设计中，保持元素的宽高比对于创建响应式布局和确保在不同设备上的一致显示非常重要。

使用aspect-ratio属性，开发者可以轻松地定义元素的理想宽高比，而不必担心容器大小变化时元素如何变形。这对于图片、视频和iframe等媒体元素尤其有用，可以防止它们被拉伸或压缩。

该属性在2021年9月已被主流浏览器广泛支持，包括Chrome、Edge、Firefox和Safari，这意味着现代网页开发中可以放心使用这一特性。

在实际应用中，宽高比不仅限于媒体元素，还可以用于创建卡片、网格布局和其他需要保持特定比例的设计元素。通过合理使用宽高比，开发者可以创建更加美观和一致的网页设计。