admin 发表于 2023-7-18 00:03:55

用css实现元素固定宽高比

如何用css实现元素固定宽高比?
一、img、video 可替换元素的固定宽高比实现原理

指定img、video的宽度或者高度,另一边设置auto自动计算。比较简单。

html:
<div class="img-wrapper">
        <img src="" alt="">
</div>
css:
.img-wrapper {
        width: 50%;
}
img {
        width: 100%;
        height: auto;
}
二、普通元素固定宽高比实现原理:

利用padding-top或者padding-bottom的百分比值,实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法,需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute,不然子元素内容都将被padding挤出容器(造成内容溢出)。
比如我们容器的长宽比是16:9,那么根据计算:100% * 9 / 16 可以得到 56.25%。如果你希望的是4:3,那么对应的就是100% * 3 / 4。也可以使用calc函数来实现自动计算:calc(100%*9/16)。
不过这种方式不灵活,只能够高度随着宽度变。CSS 工作组现在正在引入一种新的方案aspect-ratio,可以很方便地指定宽高比,不过暂时还没有浏览器实现。相信不久之后就会有浏览器逐渐实现了。

html:
<div class="box">
        <div class="scale">
                <div class="item">这是一个16:9的矩形</div>
        </div>
</div>CSS:
* {
       margin: 0;
       padding: 0;
       /* 清除默认样式 */
   }
   .box {
       width: 50%;
       /* 这里的宽度,根据你想要实现的容器相比浏览器可视窗口的宽度比来 */
   }
   .scale {
       width: 100%;
       padding-bottom: 56.25%;
       height: 0;
       position: relative;
   }
   .item {
       width: 100%;
       height: 100%;
       background-color: pink;
       position: absolute;
   }
三、如果想要实现固定比例的img,但是img本身尺寸并不是我们想要的比例,那么可以通过设置background属性来填充盒子。

但是这种方式下,图片想要不变形,需要设置cover属性哦,但是这样同时有个缺陷,就是,图片不能显示完整。background: url() no-repeat center center/cover;

html:
<div class="box">
<div class="img-wrapper"></div>
</div>css:
* {
                        margin: 0;
                        padding: 0;
                        /* 清除默认样式 */
                }

                .box {
                        width: 50%;
                        /* 这里的宽度,根据你想要实现的容器相比浏览器可视窗口的宽度比来 */
                }

                .img-wrapper {
                        width: 100%;
                        background: url() no-repeat center center/cover;
                        padding-bottom: 56.25%;
                        height: 0;
                }

                img {
                        width: 100%;
                        height: auto;
                }

页: [1]
查看完整版本: 用css实现元素固定宽高比