CSS百分比padding制作图片自适应布局

那么问题来了：这种固定比例的能力，在实际布局中到底有什么用？

大多数场景下，我们并不要求容器比例固定。但图片是个例外——图片的原始尺寸是固定的。传统固定宽度布局下，我们会给图片设定具体的宽高值，确保区域稳固。可在移动端或响应式场景下，最终宽度往往是未知的：iPhone7下是375px，iPhone7 Plus是414px，还有360px等等。这时候需要的不是固定尺寸，而是比例。

常见的实现方式有这么几种：

1. 固定高度 + background-size: cover
   像这样：

   .banner { height: 40px; background-size: cover;}

   实时效果如下：随着宽度变化，总有一部分图片区域被裁剪或留白，并非完美方案。

2. 使用视区宽度单位 vw
   例如：

   .banner { height: 15.15vw; background-size: cover;}

   如果兼容性要求不高，vw确实是个不错的做法，理解起来也直观。但一旦图片不是通栏，而是需要离左右各1rem，代码就变得啰嗦了：

   .banner { height: calc(0.1515 * (100vw - 2rem)); background-size: cover;}

   如果两侧距离本身是动态的，calc()也捉襟见肘。

3. 使用百分比 padding
   这才是真正的“普适解法”：

   .banner { padding: 15.15% 0 0; background-size: cover;}

   无论外部元素怎么变动，比例恒定不变。兼容性一级棒（IE6+），这种场景下比vw更胜任。

二、CSS百分比padding与宽度自适应图片布局

但有时候图片不方便作为背景图，而是内联的。百分比padding同样能应对，只是套路比较固定：外面需要一个固定比例的容器元素。比如这样的HTML结构：

容器负责控制比例，图片填充容器：

.banner { padding: 15.15% 0 0; position: relative;}.banner > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

效果立竿见影。去年起点中文网手机版不少页面的通栏广告就是这么实现的——看下面的gif截图（如果图片加载失败，欢迎在评论区反馈）：

无论屏幕宽度怎么变，广告图片比例始终固定，没有剪裁，没有缺失，布局弹性十足，也更健壮。

其实之前我一直低估了百分比padding的实际应用价值，毕竟有vw单位的存在，理解起来更简单。但随着图片相关布局处理越来越多，我发现百分比padding的实用价值远比想象的大——适用场景更多、兼容性更好（百分比特性IE6+支持，图片100%覆盖IE8+支持）。

对于复杂布局，如果图片宽度不固定、自适应，许多人会采用一个取巧的做法：只设定图片宽度：

img { width: 100%; }

浏览器会默认保持图片比例，宽度大了高度跟着大，宽度小了高度跟着小。开发者似乎无需关心真实比例。但这里有一个很糟糕的体验问题：页面加载过程中，图片占据的高度会从0跳到计算值，视觉上出现明显的元素跳动，代码层面也会触发布局重计算。

因此，同时约定图片的宽高还是很有必要的，同时还要保证宽度自适应，这就有点难度了。记住，遇到这种需求，没有比百分比padding布局更好的做法。

缩小浏览器宽度可以看到不同宽度下的布局效果，Gif效果截图如下：

这个demo的难点在于：图片自适应同时保持比例，且页面刷新时布局稳固不晃动。核心HTML和CSS代码如下：

.works-item-t { padding-bottom: 133%; position: relative;}.works-item-t > img { position: absolute; width: 100%; height: 100%;}

当垂直方向只使用padding-bottom表示时，如果没有text-align属性干扰，的left:0;top:0甚至可以省略。

对于图片宽度100%容器的场景，padding-bottom的百分比值就等于图片的高宽比，简单直接。

但有时候图片宽度并不是100%容器，比如图片宽度只占50%容器，高宽比4:3，那么百分比padding的写法依然灵活：

.img-box { padding: 0 50% 66.66% 0;}