响应式网页设计 - 图像

调整浏览器窗口的大小以查看图像如何缩放以适合页面。

使用宽度属性

如果width属性设置为百分比并且height属性设置为"auto"，图像将响应并放大和缩小：

示例

img {
width: 100%;
height: auto;
}

亲自试一试 »

请注意，在上面的示例中，图像可以放大到大于其原始尺寸。在许多情况下，更好的解决方案是使用max-width属性代替。

使用 max-width 属性

如果max-width属性设置为 100%，图像将在必要时缩小，但永远不会放大到大于其原始大小：

示例

img {
max-width: 100%;
height: auto;
}

亲自试一试 »

将图像添加到示例网页

示例

img {
width: 100%;
height: auto;
}

亲自试一试 »

背景图像

背景图像还可以响应调整大小和缩放。

这里我们将展示三种不同的方法：

1. 如果background-size属性设置为"contain"，背景图像将缩放，并尝试适应内容区域。但是，图像将保持其纵横比（图像宽度和高度之间的比例关系）：

这是 CSS 代码：

示例

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

亲自试一试 »

2. 如果background-size属性设置为"100% 100%"，背景图像将拉伸以覆盖整个内容区域：

这是 CSS 代码：

示例

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}

亲自试一试 »

3. 如果background-size属性设置为"cover"，背景图像将缩放以覆盖整个内容区域。请注意，"cover" 值保持宽高比，并且背景图像的某些部分可能会被剪裁：

这是 CSS 代码：

示例

div {
  width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

亲自试一试 »

不同设备的不同图像

大图像在大计算机屏幕上可能很完美，但在小设备上毫无用处。既然必须缩小图像，为什么还要加载大图像呢？为了减少负载或出于任何其他原因，您可以使用媒体查询在不同设备上显示不同的图像。

这是将在不同设备上显示的一张大图像和一张小图像：

示例

/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}

亲自试一试 »

您可以使用媒体查询min-device-width，代替min-width，它检查设备宽度，而不是浏览器宽度。那么当你调整浏览器窗口大小时图像不会改变：

示例

/* For devices smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

亲自试一试 »

HTML <图像> 元素

HTML<picture>element 为 Web 开发人员指定图像资源提供了更大的灵活性。

最常见的用途是<picture>元素将用于响应式设计中使用的图像。可以设计多个图像以更好地填充浏览器视口，而不是根据视口宽度放大或缩小一张图像。

这个<picture>元素的工作原理类似于<video>和<audio>元素。您设置了不同的源，第一个符合首选项的源就是正在使用的源：

示例

亲自试一试 »

这个srcset属性是必需的，并定义图像的来源。

这个media属性是可选的，并接受您在中找到的媒体查询CSS @media 规则。

您还应该定义一个<img>不支持的浏览器的元素<picture>元素。