padding-bottom图片自适应

今天学了慕课网的去哪了视频轮播图的图片自适应是这么做的htm,cssl如下：为什么padding-bottom 取值62.08% 呢，因为图片的高为465px,宽为749px。 465/749 既为62.08%。 cell的padding-bottom撑起了cell的高度，这个百分度取值是相对于cell宽度的百分比，而不是父容器banner高度的百分比。此时我们就解决了图片的自适应问题。

<div class="banner">
    <div class="cell">
        <img src="images/img.png">
    </div>
</div>

.banner {
    width: 700px;
    height: 700px;
    border: 1px solid #000;
    margin: 0 auto;
}

.cell {
    width: 100%;
    height: 0;
    padding-bottom: 62.08%;;
    overflow: hidden;
    background: red;
}

img {
    width: 100%;
}

转载于:https://www.cnblogs.com/zhx119/p/9525632.html