《响应式Web设计：HTML5和CSS3实践指南》——1.7节基于尺寸的响应式内边距

1.7　基于尺寸的响应式内边距
为了衬托一个响应式宽度的图像元素，需要添加相对的内边距。如果使用静态的宽度内边距，图像内边距在较小的浏览器窗口中可能会显得过大，从而与其他附近元素相互挤压，甚至可能将图像挤出屏幕。

1.7.1　准备工作
理解盒模型属性的计算是一个好的开始。一个对象所占的总宽度是它的实际宽度加上它两边的内边距，边框以及外边距，即 2 * （外边距+边框+内边距） + 内容的宽度 = 总宽度。

1.7.2　实现方式
假设一张图像在正常的非响应式状态下的宽度为200px，典型的内边距可能是8px，因此使用之前的盒模型，公式如下：

为了找到内边距的百分比，使用内边距除以总宽度，即8/216 = 0.037，舍入为4%。
在创建响应式百分比宽度图像之前，先创建CSS和HTML。给该图像添加一个内边距为4%的类。

为了帮助你看到实际内边距宽度随着浏览器窗口尺寸的改变而变化，可以给图像的CSS添加一个背景颜色（background-color: #cccccc;）。

1.7.3　工作原理
图像内边距设置为100%则会紧贴其父元素的边缘。当父元素尺寸变化时，图像内边距也会相应调整。如果盒模型所对应的各项参数计算得当，布局将会成功地响应浏览器窗口的宽度变化。