使用 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 / 800

padding-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.