响应式网页设计 - 图片

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

使用 width 属性

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

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

使用 max-width 属性

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

将图像添加到示例网页

背景图像

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

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

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

以下是 CSS 代码：

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

以下是 CSS 代码：

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

以下是 CSS 代码：

不同设备使用不同图像

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

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

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

HTML<picture> 元素

HTML <picture> 元素使 Web 开发人员在指定图像资源时具有更大的灵活性。

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

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

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

这 media 属性是可选的，并接受您在CSS @media 规则.

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