响应式 - 基于尺寸的响应式内边距

前言

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

准备工作

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

实现方式

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

为了找到内边距的百分比，使用内边距除以总宽度，即8/216=0.037，舍入为4%。

在创建响应式百分比宽度图像之前，先创建CSS和HTML。给该图像添加一个内边距为4%的类。



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

工作原理

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