使用width属性
如果width属性被设置为100％时，图像将响应和比例上下：
请注意，在上面的例子中，图像可以扩大为比其原始大小。 更好的解决方案，在很多情况下，将使用max-width属性。
使用max-width属性
如果max-width属性被设置为100％时，图像会缩减，如果它有，但从来没有扩展到比其原始尺寸较大：
将图像添加到示例网页
背景图片
背景图像还可以响应调整和缩放。
在这里，我们将展示三种不同的方法：
1.如果background-size属性设置为“遏制”，背景图像将按比例，并尝试以适应内容区域。 然而，图像将保持其宽高比（图像的宽度和高度之间的比例关系）：
这里是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');
}
} 试一试» HTML5 <picture>元素
HTML5引入了<picture>元素，它可以让你定义多个图像。
浏览器支持
| 元件 | |||||
|---|---|---|---|---|---|
| <picture> | 不支持 | 38.0 | 38.0 | 不支持 | 25.0 |
在<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规则 。
你也应该定义一个<img>对于不支持的浏览器元素<picture>元素。