用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]