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

下面是CSS百分比padding制作图片自适应布局的完整攻略。

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

CSS百分比padding制作图片自适应布局是一种常见的应用于响应式Web设计中的技术，它可以使图片根据所在容器的大小自适应地缩放，适配不同屏幕尺寸的设备。通过使用该技术，可以让布局更加灵活，更加适合移动端设备。

制作图片自适应布局的步骤

以下是制作图片自适应布局的具体步骤：

1. 在HTML中创建一个父容器（例如一个<div>元素）来容纳图片。

2. 给父容器设置一个固定的高度并将其设为“相对”定位。例如：

.parent {
  position: relative;
  height: 300px;
}

1. 设置图片的样式。使用CSS background属性，同时将background-size属性设置为“cover”，这样可以将图片缩放到覆盖整个父容器。例如：

.parent {
  background: url('image.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

1. 最后，在父容器上设置padding-bottom属性为一定的百分比（通常是图片的高度与宽度之比），以确保图片的宽高比始终保持不变。例如：

.parent {
  padding-bottom: 75%; /* 4:3 图片 */
}

这样就可以实现一个简单的图片自适应布局了。

示例说明

以下是两个示例，用来说明上述步骤的应用。

示例1：矩形图片

假设我们有一个高为300px，宽为400px的矩形图片需要在一个父容器中自适应展示。

HTML代码如下：

<div class="parent">
</div>

CSS代码如下：

.parent {
  position: relative;
  height: 300px;
  background: url('rect.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-bottom: 75%; /* 图片高宽比为 4:3 */
}

在这个示例中，我们将父容器的高度设为固定的300px，并使用CSS background属性将图片设置为背景图。然后，设置padding-bottom为75%，保证图片的高度与宽度的比例不变，同时也避免了当图片宽度大于父容器时出现截断的情况。

示例2：正方形图片

假设我们有一个长宽都为200px的正方形图片需要在一个父容器中自适应展示。

HTML代码如下：

<div class="parent">
</div>

CSS代码如下：

.parent {
  position: relative;
  height: 0;
  padding-bottom: 100%; /* 图片高度等于宽度 */
  background: url('square.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

在这个示例中，我们使用了一个高度为0的父容器，并设置了padding-bottom为100%。这样就可以保证父容器的高度与宽度之比始终为1:1，从而适应正方形图片。同样，使用CSS background属性将图片设置为背景图，并将background-size属性设置为“cover”，以保证图片可以根据父容器的大小自适应缩放。