其实这也不算什么特别的技巧，网上也很多人写过了，只是初次次使用，仍旧觉得惊艳无比~
需求
再整 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.
网友评论