CSS百分比填充使图片具有自适应布�

首先，CSS填充百分比是通过相对宽度来计算的

在默认的水平文档流动方向下，CSS边距和填充属性在垂直方向上的百分比值是相对于宽度计算的，这不同于顶部和底部属性的百分比值。

这种设计的原因将在我的新书(应该在几个月后出版)中解释，这里不再赘述。

对于padding属性，任何方向的填充百分比现在都是块级容器，具有固定的宽度计算比例。例如，假设现在有一个div元素：

div { padd : 50%；}或：

div { padd : 100% 0；}或：

div { padding-bottom : 100%；}，div元素的大小是一个宽度和高度为1:1的正方形，并且div元素可以始终保持相同的比例，而与其父容器的宽度无关。

这个能固定比例的特性有什么作用？

对于大多数版面，我们不要求固定的比例，但有一个例外，那就是图片，因为图片的原始大小是固定的。在传统的固定宽度布局下，我们会为图片设置特定的宽度和高度值，以确保我们的图片占据稳定的区域；但是，在移动或响应开发的情况下，图片的最终显示宽度可能不确定。例如，手机上的横幅广告在iPhone7下的宽度为375，在iPhone7 Plus下的宽度为414，宽度为360。这时，不需要设置图片的固定大小，而是要设置比例。

通常有如下一些实现：

1.固定高度，然后使用背景大小属性进行控制，如下所示：banner { height: 40px背景尺寸：封面；}实时效果如下：

可以看出，随着宽度的变化，总会有一些图片区域(宽度或高度)无法显示，这并不是一个完美的做法。

2.使用可视区域宽度单位vw如下：banner { height: 15.15vw背景尺寸：封面；}如果兼容性要求不是很高，使用大众也是一个不错的做法，至少更容易理解。

但是，如果我们的图片不是横幅，而是需要左右各1厘米的距离，那么我们的CSS代码就会啰嗦。为了保持完美的比例，使用CSS3 calc()计算：banner { height : calc(0.1515 *(100 VW-2 rem))；背景尺寸：封面；}如果距离两边的图片宽度是动态不确定的，此时calc()也是供不应求，但只是一个普通的填充属性，兼容性和适应性都很出色。

3.使用百分比填充，如下所示：横幅{ padd : 15.15% 0 0；背景尺寸：封面；}这时，无论画面的外部元素如何变化，尺度都是不变的。

第二，CSS百分比填充和宽度自适应图片布局

然而，有时我们的图片不方便作为背景图片呈现，但是内嵌img和百分比填充可以轻松处理。例程相对固定，图片元素之外需要固定比例的容器元素，比如下面的HTML结构：

div class=' banner ' img src=' http : ' banner.jpg/div.banner元素也负责控制比例，然后图片填充。横幅元素。CSS代码如下：横幅{ padd : 15.15% 0 0；相对位置：}.banner img { position : absolute；宽度： 100%；高度： 100%；left : 0；top : 0；}效果达到了！

眼见为实。去年七点手机版很多页面的横幅广告都是这样实现的。最终效果如下图gif截图所示(如果图片无法显示，可以评论反馈):

可以看到，无论屏幕宽度有多宽，我们的广告图片比例都是固定的，不会有剪裁，也不会有遗漏的区域，所以布局非常灵活，更加稳健。

————-

其实我一直低估了百分比填充的实际应用价值，因为有大众单元，毕竟看起来更容易理解大众，所以从来没有介绍过相关的技巧。但是随着与图片相关的布局处理越来越多，我发现百分比填充的实用价值比想象中要大，比大众单位更适合场景，兼容性更好(有百分比功能IE6支持，图片IE8 100%覆盖)。

对于复杂的布局，如果图片的宽度不是固定的和自适应的，我们通常会想到这样一个巧妙的办法，那就是只设置图片的宽度，例如：

img { width : 100%；}此时浏览器默认会保持图片比例显示，图片宽度会增加，高度也会增加；随着图片的宽度变小，高度也变小。看来开发者不需要在意图片的真实比例。

但是这种技术有一个非常不好的体验问题，就是随着页面的加载，图片占用的高度会从0变为计算出来的高度，视觉上会有明显的元素跳跃，在代码层面会有布局重算。

所以图片的宽度和高度需要同时约定，但是同时保证自适应宽度似乎有点困难。记住，如果遇到这种需求场景，没有比百分比填充布局更好的方法了！

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

这个演示的难点在于图片在保持比例的同时具有自适应能力，页面不稳定，刷新时不抖动。它的核心HTML和CSS代码如下：

div class=' works-item-t ' img src=' http :/150 x200 . png '/div . works-item-t { padding-bottom : 133%；相对位置：}.works-item-t img { position : absolute；宽度： 100%；高度： 100%；}可以看到，当垂直填充值仅用padding-bottom表示时，如果没有text-align属性的干扰，img元素的left:0Top:0可以省略。

对于这种画面宽度100%容器，高度成比例的场景，填充底的百分比值就是画面元素的长宽比，就这么简单。

但是有时候，图片宽度不是100%容器宽度，比如图片宽度是50%容器宽度，图片高宽比是4:3。此时，CSS垂直百分比为666，如下所示：img-box { padd : 0 50% 66.66% 0；}