padding-top: 100% 的问题

Question

<div class="image-header">
    <img src="xxx.png">
</div>

style如下:

.image-header
  position: relative
  width: 100%
  padding-top: 100%   
  height: 0
  img
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

为什么img设置height:100%，但是父元素设置的height为0，却可以显示图片呢

Answer 1

img{width:100%;height:auto;}就可以实现自适应了，

Answer 2

image-header加上overflow:hidden

Answer 3

子级脱离文档流后，子级的width/height为（设置了static以外定位的)父级width/height+padding

Answer 4

因为你有 padding-top: 100%
不仅会显示高度，还会和你的宽度一样，是一个长宽相等的正方形的布局。

Answer 5

padding-top:100% 就是让这个盒子生成一个正方形

Answer 6

因为img设置了position:absolute,元素会加上父级的padding进行计算。