最近在拿移动端项目练手的时候发现这样一个问题:
在浏览器把图片加载出来以前，图片的高度是零，没办法把容器撑开，容器在图片加载前后都会有一个变型的过程，也就是俗称的“闪烁”，而如果图片加载不出来，整体布局就更是难看了。
此时我们需要不靠图片本身就能把容器的高度撑开方可解决问题。
在移动端，由于各机型分辨率相差太大，对图片是不能写死px值的，还是需要用百分比来实现自适应，因为容器宽高的参照物不一样，所以相对与宽来说，高用百分比实现起来相对繁琐，这时就要用到一个很important的css知识点：
当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
另外在计算overflow时，是将元素的内容区域（即 width / height 对应的区域）和 padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden ，“溢出”到 padding 区域的内容也会照常显示。
我们就要利用这一基础实现宽高成比例展示。
假设高是宽的30%，相应代码如下：
overflow: hidden; width: 100%; height: 0; padding-bottom: 30%;
当然，用width: 100%; height: 30vw;亦可实现，但兼容性不太好，所以还是采用上述方法
注：vw : 1vw 等于视口宽度的1%，vh : 1vh 等于视口高度的1%
网友评论