CSS 是网页设计的基础，负责呈现 HTML 结构的样式。本文探讨如何使用 `aspect-ratio` 属性设置 div 的宽高比。
宽高比描述宽和高的比例，如矩形宽度 12 个单位，高度 6 个单位，比例为 2:1。在响应式设计中，元素按固定比例缩放时，`aspect-ratio` 属性非常实用。
`aspect-ratio` 属性新引入，用于直接设置元素宽高比。接受两个参数：宽度和高度比例，例如 `aspect-ratio: 16 / 9;`。该属性不直接设置实际尺寸，仅定义宽高比，由其他 CSS 属性决定。
实际应用中，设置 div 宽度 100%，高度按宽度的 9/16 计算。反之，设置高度，宽度自动计算为 16/9。`aspect-ratio` 属性依赖容器宽度、高度设定，同时设定时失效。
代码示例展示 `aspect-ratio` 的使用。
兼容性方面，`aspect-ratio` 是新属性，部分浏览器支持，包括 Chrome 88、Firefox 89、Safari 14.1、Opera 74 及对应版本的 Edge 和 Chrome for Android。
总结，`aspect-ratio` 属性简化了设置元素宽高比的过程，特别适用于响应式布局，但需注意浏览器兼容性问题。
本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。
热心网友
回答时间：2025-01-13 17:28
