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

Posted mengff

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片固定比例显示,避免闪烁相关的知识,希望对你有一定的参考价值。

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;
}

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

以上是关于图片固定比例显示,避免闪烁的主要内容,如果未能解决你的问题,请参考以下文章

CSS/JS 图片高度固定宽度按比例显示 (纯CSS方法和CSS+JS方法)

固定大小容器内,不同比例的图片高度撑满,宽度居中裁剪

android,在先做了popStack之后,如何避免用FragmentTransaction替换片段时出现闪烁

覆盖javascript以消除闪烁

android. imageview是如何控制它的宽高比例,不让各种规则图片影响它大小。如图。图片

C# listview显示图片问题