图片加载前的占位高度预设纯CSS实现（自适应屏幕的高宽比）——CSS黑魔法

示例场景：

banner轮播图片，banner宽度占满屏幕宽度，此处需要做到banner的自适应问题

 

问题描述：

 banner自适应，在CSS上是很容易实现的。但问题是，当图片还没加载出来的时候，是不知道banner的自适应高度的。通常我们都会为banner预设置一个最低的高度，以至于

可以在图片加载前让用户感知到这里有内容还没加载出来。那么问题来了，当图片加载出来以后，整个容器的高度都会变化一次。

那么，有什么办法可以在图片加载出来之前就已经能够渲染出准确的容器高度呢？

 

解决方案：

重要前提：banner的各个图片的高宽比例必须一样

1.使用padding-top百分比

你可能不知道，padding和margin的百分比高度是基于其父元素的宽度的。相关知识传送门：http://www.w3school.com.cn/cssref/pr_padding.asp

所以，在coding样式前，你需要先计算出banner图片的固定高宽比例值。

 

例如：图片是500*300，那么    宽:高=5:3，可以计算出当宽是100%的时候，高就是宽的60%

所以padding-top应该是60%。

这样就能够纯CSS实现banner的真实高度。

 

转载于:https://www.cnblogs.com/joyho/articles/4730871.html