今天和同事讨论这个问题，一时间还想不到了，于是学习了下，就顺便当个记录吧
要在CSS中实现固定宽高比，有两种主要的方法可以选择。一种是使用新的
aspect-ratio
属性，另一种是利用padding技巧。随着现代浏览器对
aspect-ratio
属性的广泛支持，直接使用该属性已成为实现固定宽高比的首选方法。
使用 aspect-ratio 属性
aspect-ratio
属性允许你定义元素盒子的宽高比，即使父容器或视口大小发生变化，浏览器也会调整元素的尺寸以保持指定的宽高比。至少需要一个盒子的尺寸是自动的，才能让
aspect-ratio
生效。如果宽度和高度都不是自动尺寸，那么提供的宽高比就不会影响盒子的首选尺寸。
以下是一个使用
aspect-ratio
属性的示例，它创建了一个具有16:9宽高比的元素：
.aspect-ratio-16-9{aspect-ratio: 16 / 9;width: 100%;/* 或者任何你想要的宽度 */background-color: lightblue;}
<divclass="aspect-ratio-16-9"></div>
使用 padding-top 百分比技巧
对于不支持
aspect-ratio
属性的旧浏览器，你还可以使用
padding
技巧来维持元素的宽高比。这种方法基于元素的宽度百分比和其顶部填充百分比之间的关系。
以下是一个使用
padding-top
技巧的示例，它创建了一个宽高比为1:1的元素：
.aspect-ratio-1-1{position: relative;width: 100%;/* 或者任何你想要的宽度 */padding-top: 100%;/* 高度等于宽度 */background-color: lightblue;}
<divclass="aspect-ratio-1-1"></div>
这种方法的一个缺点是它依赖于元素的宽度，因此如果元素的宽度改变，宽高比也会改变。但是，对于大多数响应式设计来说，这种方法仍然非常有用。
比如你想要创建一个宽高比为16:9的div，你可以通过设置padding-top的百分比值来实现。这个百分比值是基于div的宽度计算的，因此要得到16:9的宽高比，你需要将padding-top设置为9 / 16 * 100%，即56.25%。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><style>.container{position: relative;width: 100%;padding-top: 56.25%;/* aspect-ratio: 16 / 9; */background-color: red;}.content{position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: red;text-align: center;line-height: 200px;/* Adjust based on your needs */font-size: 24px;color: black;}</style></head><body><divclass="container"><divclass="content">Content Here</div></div></body></html>
总结
总结起来，使用
aspect-ratio
属性是实现固定宽高比的现代方法，因为它直接控制元素的宽高比，不受元素宽度的影响。而
padding-top
技巧则是一种兼容性更好的解决方案，适用于那些不支持
aspect-ratio
属性的旧浏览器。
参考
aspect-ratio - CSS：层叠样式表 | MDN
本文转载自: https://blog.csdn.net/IAIPython/article/details/140777358
版权归原作者 努力挣钱的小鑫 所有， 如有侵权，请联系我们删除。
版权归原作者 努力挣钱的小鑫 所有， 如有侵权，请联系我们删除。