html怎么帮图片占位,使用 CSS 保持图片占位区的宽高比

其实这也不算什么特别的技巧，网上也很多人写过了，只是初次次使用，仍旧觉得惊艳无比~

需求

再整 Hexo 皮肤，在文章列表显示碰到一个问题：水平方向，文章列表铺满整屏

每个文章有个封面图，封面图片宽高比固定

文章列表响应式处理，不同屏幕尺寸下，每个封面图片大小自动适应

需要在封面图片未加载成功的时候，有个空白占位

演示效果：

演示

问题

因为做响应式处理，所以在不同的窗口大小下，每行的文章个数、封面图片的大小不固定。

那么就不能写死封面宽高，那么如何保持宽高比呢？我不想用 js 处理(嗯，感觉又暴露我渣渣的 js 技术了...)

毫无头绪，放了几天...(都是春节期间的事情了，现在想起来，还是写写记记...)

然后逛逛其他网站，看看他们怎么的处理

个人常逛的一个壁纸网站：wallhaven，是直接写死宽高，300x200，inline-block，然后水平居中。不同屏幕尺寸下，每行显示的个数将会不一样。

嗯，是挺好。但是 hexo 每个页面生成的文章数据是固定的，如果使用这种方式，大小屏显示会比较乱。而且不能满足铺满整屏的需求，pass

另一个就是很有名的设计网站：dribbble。很有意思，大图显示模式下，每个文章宽度不固定。通过媒体查询来显示一行几个元素，并 calc 计算每个显示的宽度。相对而言，大屏幕下，图片会更大一点点。

嗯，很有意思。

然后我发现这个图片未加载的请款下，有个空白占位，而且图片加载完成后，刚好填充该空白，且页面未抖动！

loading.gif

解决思路

贫穷限制了我的想象力！!

扒源码(图片默认是 800x600)：.dribbble-img {

...    max-width: 100%;    height: 0;    padding-bottom: 75%;

...

}

细细品味一下，惊艳：在 CSS 中，padding 的百分比是相对于元素自身的

75% 就是 75 / 100 = 600 / 800padding-bottom / 100 = height / width

假设，图片尺寸 800 x 600

那么，padding-bottom = 600 / 800 * 100 = 75

所以设置 padding-bottom: 75% 就能保持宽高比

总结能用 CSS 解决的就坚决不用 JS

公式(百分比)： padding-bottom = H / W * 100

其实 CSS 中百分比还有个很常见的运用：position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

是的，水平垂直居中。top、left 相对于父级偏移 50%，translate 再回退自身 50% 来纠正定位。

—— 2018/05/29 By Live， Haze.

作者：RoamIn

链接：https://www.jianshu.com/p/c6acd1e6f46e