前端必知必会-响应式设计之图片

---

响应式网页设计 - 图片

使用 width 属性

如果 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;
}

不同设备的不同图像

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

以下是一张大图像和一张小图像，它们将显示在不同设备上：

示例

/* 对于宽度小于 400px：*/
body {
background-image: url('img_smallflower.jpg');
}

/* 对于宽度为 400px 及以上：*/
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}

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

示例

/* 对于小于 400px 的设备：*/
body {
background-image: url('img_smallflower.jpg');
}

/* 适用于 400px 及更大的设备：*/
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}

HTML <picture> 元素

HTML <picture> 元素为 Web 开发人员提供了更灵活的指定图像资源的方式。

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

<picture> 元素的工作方式与 <video> 和 <audio> 元素类似。您设置了不同的来源，第一个符合偏好的来源就是正在使用的来源：

示例

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>

srcset 属性是必需的，它定义图像的来源。

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

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

---

总结

本文介绍了响应式设计之图片的使用，如有问题欢迎私信和评论