響應式網頁設計 - 圖片
調整瀏覽器視窗大小，以檢視圖片如何適應頁面。
使用 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> 元素。
