loading

通过padding-bottom或者padding-top百分比,实现等比缩放响应式图片

一个基础却又容易忽略的css知识点
Percentages: refer to logical width of containing block
当margin/padding取形式为百分比的值时,是以父元素的width为参照物的!
图片缩放响应式就好解决了,宽度响应式非常简单,设置百分比就ok了,然后高度呢?高度怎么处理呢?

上代码

<style>
.img-container {
        position: relative;
        padding-bottom: 80%;
        height: 0;
        overflow: hidden;
        background: red;
 }
 .img-container img {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
}
</style>
<div class="img-container">
    <img src="images/mla.jpg" alt="" />
</div>

设置父元素div.img-containe的高度为0,设置padding-bottom的值为图片的宽高百分比。

子元素img相对父元素绝对定位,然后高度,宽度为百分之百,自然而然图片的实际宽高是padding-bottom的值乘以父元素的实际宽度,从而实现等比缩放响应式图片。