如何⽤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;
/* 清除默认样式 */
margin属性值可以为百分比}
.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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。