比如下面这组布局，看起来很和谐，但是当一张图片加载不出的时候，就会出现文字被移动上去的样式问题，很影响效果，如何才能在这种情况下把上面留白占位呢？
布局：
最简单的直接给盒子先加上高度？但是现在的开发中通常需要自适应，元素宽度均根据页面变化而变化，所以图片的宽高也会按比例变化，在图片盒子上先设置高度也是不可取的。
于是尝试以下办法可解决：
首先我们可以确定这组图片的宽高比，这组图片的高度是宽度的72%左右。
css：
可以看到问题顺利解决了，思路就是用padding撑起图片div的高度，保证里面无论有没有图片都不会塌陷，但是padding会挤掉正常的图片，所以我们可以使图片相对于图片盒子进行绝对定位，定位到左上角，就OK了。
1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%
padding-top 和 padding-bottom 属性分别表示容器的上内边距与下内边距。虽然设置的是垂直方向的高度，有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。
换句话就是说， padding-top 和 padding-bottom 的值为百分比时，其实表示的是其元素宽度的百分比。
因此，在容器宽度不确定的情况下(如: 80% , flex: 1 等），保持容器宽高比不变，可以通过设置元素的 padding-top 或 padding-bottom 值。
例如，保持宽高比为16:9：
这个在保持图片的宽高比时非常有用。
