响应式网页设计 - 图片
调整浏览器窗口大小，看看图片如何缩放以适应页面。
使用 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> 元素为网页开发者提供了更多灵活性来指定图片资源。
<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> 元素。
