RWD 網頁設計（五）：響應式圖片與多媒體處理

2025年4月3日 rwdweb

前言

除了版面設計，圖片和多媒體也是 RWD 不可忽略的一環。如果圖片沒處理好，不僅載入變慢，還可能在小螢幕上被擠壓變形！本章將教你如何讓圖片和影片在各種裝置上都能完美呈現。

響應式圖片的基本做法

1. CSS 限制圖片最大寬度

最簡單的響應式圖片方式，就是用 CSS 讓圖片不超過容器寬度：

img {
 max-width: 100%;
 height: auto;
 display: block;
}

這樣圖片就會自動縮放，不會超出版面，也不會變形。

2. 使用 HTML5 `<picture>` 標籤與 `srcset`

如果你有多種尺寸的圖片，建議用 <picture> 或 srcset，讓瀏覽器自動選擇最合適的圖片載入：

<picture>
 <source media="(max-width: 600px)" srcset="small.jpg">
 <source media="(max-width: 1200px)" srcset="medium.jpg">
 <img src="large.jpg" alt="範例圖片">
</picture>

你也可以單純用 img 的 srcset 與 sizes 屬性，根據螢幕寬度自動載入最適合的圖片

<img src="large.jpg"
    srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
    alt="範例圖片">

響應式背景圖片

用 CSS `background-image` 時，也可以配合媒體查詢切換不同圖片，確保在手機上載入較小的圖片，節省流量。

.hero {
 background-image: url('large-bg.jpg');
}
@media (max-width: 600px) {
 .hero {
   background-image: url('small-bg.jpg');
 }
}

響應式影片與嵌入內容

YouTube、Google Maps 這類 iframe 內容，預設通常不會響應式。可以用一個「外包 div」搭配 CSS 技巧，讓它變成自適應寬高，這樣影片就能隨容器寬度自動縮放，不會超出畫面。

.responsive-iframe {
 position: relative;
 width: 100%;
 padding-bottom: 56.25%; /* 16:9 比例 */
 height: 0;
}
.responsive-iframe iframe {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 border: 0;
}

<div class="responsive-iframe">
 <iframe src="[https://www.youtube.com/embed/xxxxxxx"](https://www.youtube.com/embed/xxxxxxx") allowfullscreen></iframe>
</div>