前端|巧用css属性，保持元素的宽高比

在页面绘制时，经常遇到元素的宽度或者高度需要自适应，但又希望保持元素的宽高比。

如何实现这样的效果，而不需要使用额外的HTML结构或 js 代码。

❤ 这里分享两个方法:

自适应.gif

方法一：使用 `aspect-ratio` 属性


css
 代码解读
复制代码
.box {
    width: 50%;
    aspect-ratio: 16 / 9;
}

width: 100%; ：设置元素的宽度为其父元素的100%。
aspect-ratio: 16 / 9; ：设置元素的宽高比为16:9。由于已经指定了宽度，浏览器会根据这个比例自动计算高度。

这种方法简洁明了，但需要注意的是，aspect-ratio 属性在较旧的浏览器中可能不受支持。因此，在生产环境中使用时，您可能需要考虑浏览器兼容性。

方法二：使用 `padding-bottom` 技巧


css
 代码解读
复制代码
.box {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

width: 50%; ：同样设置元素的宽度为其父元素的100%。
height: 0; ：将元素的高度设置为0。
padding-bottom: 28.125%; ：通过设置底部内边距为宽度的56.25%（即9/16），可以间接地设置元素的高度，从而实现16:9的宽高比。由于元素的高度被设置为0，其内容（如果有的话）将不会占据任何空间，但padding-bottom会创建一个可视区域，其高度与宽度成16:9的比例。

这种方法是一种传统的CSS技巧，兼容性好，但在某些情况下可能需要额外的HTML结构来包裹内容，以确保内容正确显示。

总结

当你在考虑怎么让页面上的某个元素保持固定的宽高比时，你可以根据实际情况和浏览器兼容性来挑选最合适的方法。

如果你希望你的网页能在各种浏览器上都能看起来好好的，特别是那些老旧的浏览器，那么用padding-bottom这招会比较保险。这个方法很靠谱，能在很多不同的浏览器上稳定运行。

但要是你的用户大多都在用新版的浏览器，而且你也想让代码看起来更简洁、更好懂，那aspect-ratio这个属性就挺适合的。它直接就能设定好元素的宽高比，代码写起来也简洁明了。

所以，具体选哪个方法，还得看你的需求和用户的浏览器使用情况来定。

demo分享

自适应.gif


html
 代码解读
复制代码
<body>
    <div class="resize-container">
        <div class="box1">
            宽高比16/9<br/>
            aspect-ratio
        div>
        <div class="box2">
            宽高比16/9<br/>
            padding-bottom
        div>
    div>
body>


css
 代码解读
复制代码

方法一：使用 aspect-ratio 属性

方法二：使用 padding-bottom 技巧

总结

demo分享

评论记录：

方法一：使用 `aspect-ratio` 属性

方法二：使用 `padding-bottom` 技巧