图片固定比例显示，避免闪烁

标签：屏幕   top   百分比   缺陷   padding   code   div   闪烁   ott   

1. padding/margin的百分比实现

padding-top/bottom，margin-top/bottom都是基于父元素的宽度为参照的，可以实现高宽比固定的盒子

.box{
    width: 50%;
    padding-bottom: 30%;
}

就实现了高宽比为3:5的盒子

然后设定img

.img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

就实现了固定比例的图片显示，不会出现，因图片未加载出来(图片高度为0)，而高度闪烁问题。

上面的.box设置有缺陷，max-height无效，因为max-height对padding不起作用。

可以使用伪元素设定padding来撑起来父元素。

.box{
    width: 50%;
    position: relative;
}
.box:after{
    content: ‘ ‘;
    display: block;
    padding-top: 30%;
}

这样就实现了一个可以设定max-height的固定比例盒子。

2. vw单位实现

使用vw也可以实现固定比例的盒子，因为vw的宽度总是相对于屏幕。

.box{
    width: 50vw;
    height: 30vw;
}

兼容性允许的情况下，可以使用。

图片固定比例显示，避免闪烁

标签：屏幕   top   百分比   缺陷   padding   code   div   闪烁   ott   

原文地址：https://www.cnblogs.com/mengff/p/12454618.html