当图片未正确加载，或加载完成前，由于图片高度为0，其容器会因为没有内容，导致容器无法撑高而塌陷，而如果加载较慢则会在图片加载完成后出现闪烁的情况。
css中，当padding-top/bottom值为百分比时，其值都是以其父元素的宽度为参照对象。因此对于宽高比例固定的情况，可以利用padding-top/bottom用于图片自适应占位，解决页面闪烁的问题。
如果仅设置值padding-top/bottom为百分比，会出现一个问题，就是该方法容器的max-height属性会失效，就无法限制容器的最大高度了。
因此，可以给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度，最后内容用绝对定位的方式添加即可。如：
#container{
width: 50%; max-height:300px; background-color:#ddd; /*由于margin存在塌陷的问题，需要通过构建BFC来保证容器不会受到影响，因此这里可以给容器一个overflow:hidden来保证伪元素的margin不会塌陷。*/ overflow:hidden; position: relative; /* 父容器相对定位 */}.placeholder::after{ content:""; display:block; margin-top:100%;}img{ position:absolute; /* 内容绝对定位 */ left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); /* 控制内容绝对定位位置 */ width:80%; /* 控制图片不溢出，因此这里使用的图片实际宽度受父容器影响 */}
但是对于宽高比例不定的图片来说，这样做可能导致图片显示不全，使用时要注意。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery