图片固定比例显示,避免闪烁
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替换片段时出现闪烁