响应式网页设计 - 图片
调整浏览器窗口大小，以查看图片如何适应页面。
使用 width 属性
如果 width 属性设置为百分比，并且 height 属性设置为 "auto"，则图片将响应式缩放，向上和向下。
请注意，在上面的示例中，图片可以放大到大于其原始尺寸。在许多情况下，更好的解决方案是改用 max-width 属性。
使用 max-width 属性
如果 max-width 属性设置为 100%，图像将向下缩放（如果需要），但绝不会放大到大于其原始尺寸。
将图片添加到示例网页
背景图片
背景图片也可以响应调整大小和缩放。
这里我们将展示三种不同的方法
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="鲜花">
</picture>
自己动手试一试 »
srcset 属性是必需的，它定义了图片的来源。
media 属性是可选的，它接受你在 CSS @media 规则 中找到的媒体查询。
您还应该为不支持 <picture> 元素的浏览器定义一个 <img> 元素。
