css实现保持图片宽高比
实现思路:快级元素padding以百分比表示时,取的是容器的宽度的百分比。所以可以在图片外面套个div,div通过padiing限制宽高比,再设置图片和div同宽等高。
假设图片宽高比为3/2,那么高大约是宽的66%
<div class="img-box">
<img src="" alt="" >
</div>
.img-box {
width: 100%;
height: 0;
padding-bottom: 66%;
overflow: hidden;
position: relative;
}
.img-box > img {
display: block;
width: 100%;
height: 100%;
position: absolute;
}