使用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>元素。