纯css实现⾼度与宽度成⽐例展⽰
最近在拿移动端项⽬练⼿的时候发现这样⼀个问题:
在浏览器把图⽚加载出来以前，图⽚的⾼度是零，没办法把容器撑开，容器在图⽚加载前后都会有⼀个变型的过程，也就是俗称的“闪烁”，⽽如果图⽚加载不出来，整体布局就更是难看了。
此时我们需要不靠图⽚本⾝就能把容器的⾼度撑开⽅可解决问题。
margin属性值可以为百分比在移动端，由于各机型分辨率相差太⼤，对图⽚是不能写死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%

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。