CSS RWD 圖片

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入響應式網頁設計（RWD）圖片的世界。作為你們友好的鄰居電腦老師，我很興奮能夠指導你們這個現代網頁開發的重要環節。所以，拿起你們最喜歡的飲料，舒適地坐好，我們一起來深入探討吧！

CSS RWD 圖片 - width 屬性

我們從基礎開始。width 屬性是我們響應式圖片工具包中的基本工具。它讓我們能夠控制圖片在不同設備上顯示的寬度。

<img src="cute_cat.jpg" style="width:100%;">

在這個例子中，我們告訴瀏覽器讓我們可愛的貓咪圖片佔據容器的 100% 寬度。這意味著無論是在巨大的桌面顯示器還是微小的手機屏幕上查看，圖片都會伸展或縮小以適應。

但等等，還有更多！我們也可以使用特定的單位：

<img src="cute_dog.jpg" style="width:500px;">

在這裡，我們設置了固定的 500 像素寬度。雖然這樣可以工作，但它不是很響應式。圖片將始終是 500px 寬，這可能在桌面上看起來很好，但在小屏幕上可能會造成問題。

CSS RWD 圖片 - max-width 屬性

現在，讓我介紹給你們響應式圖片的超級英雄：max-width 屬性。它就像是你們圖片的保險網。

<img src="happy_turtle.jpg" style="max-width:100%;">

這個小寶貝確保我們的烏龜朋友從不超過其容器的寬度。它可以縮小以適應小屏幕，但它在大型顯示器上不會超出原始大小。這是兩全其美的！

CSS RWD 圖片 - 在網格中

在真實的網頁設計世界中，我們經常與網格一起工作。我們來看看如何讓我們的圖片在這種環境中表現良好。

<div class="row">
<div class="column">
<img src="beach.jpg" style="width:100%">
</div>
<div class="column">
<img src="mountain.jpg" style="width:100%">
</div>
</div>

<style>
.row {
display: flex;
}

.column {
flex: 50%;
padding: 5px;
}
</style>

在這個例子中，我們創建了一個兩列佈局。每個圖片佔據其列的 100% 寬度，確保它們在大屏幕上並排顯示，在小屏幕上則整齊堆疊。

CSS RWD 圖片 - 使用背景圖片

有時候，我們希望我們的圖片不只是內容——我們還希望它們能夠設定氛圍。這時候，背景圖片就派上用場了！

<div class="hero-image">
<div class="hero-text">
<h1>我是 John Doe</h1>
<p>我是一名攝影師</p>
</div>
</div>

<style>
.hero-image {
background-image: url("photographer.jpg");
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>

這段代碼創建了一個驚艷的橫幅區域，帶有一個背景圖片。background-size: cover 確保圖片覆蓋整個 div，而 background-position: center 則讓它在屏幕大小變化時保持居中。

CSS RWD 圖片 - 使用媒體查詢

最後但同樣重要的是，我們來聊聊媒體查詢。這些就像秘密情報員，能夠偵測用戶的屏幕大小並應用特定的樣式。

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

這段代碼非常聰明。它根據屏幕寬度提供不同的圖片來源。在 600px 寬的屏幕上，它顯示一個小花的圖片。對於 1500px 寬的屏幕，它顯示一個中等大小的圖片。任何更大的屏幕則獲得全尺寸的花朵力量！

RWD 圖片技術總結

最後，我們來總結一下我們學到的技術，並提供一個方便的表格：

技術	描述	最佳使用案例
width:100%	讓圖片寬度響應式	當你希望圖片始終填滿其容器時
max-width:100%	防止圖片超過原始大小	總是在大多數的響應式圖片場景中使用
網格佈局	在靈活的網格中組織圖片	當在結構化的佈局中顯示多個圖片時
背景圖片	使用圖片作為背景	為橫幅區域或裝飾目的使用
媒體查詢	根據屏幕大小提供不同的圖片	當你需要為不同的設備優化圖片質量時

好了，各位！你們現在已經掌握了讓圖片在任何設備上看起来都很棒知識。記住，響應式網頁設計是關於創造一個在所有屏幕尺寸上無縫的用户體驗。所以，去嘗試實驗吧，願你的圖片總是完美響應！

Credits: Image by storyset