5.1 屬性 srcset
自適應圖片 對創建回應式與優化的網頁很重要。它們允許根據設備和查看條件加載不同尺寸和解析度的圖片，從而提升效能和使用方便性。實現自適應圖片的主要工具在
HTML 中就是 srcset 和 sizes 屬性。
屬性 srcset 用於指定多個不同尺寸或解析度的圖片來源。瀏覽器會根據用戶設備選擇最合適的圖片。
語法：
<img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">
解釋：
src: 指定預設的圖片路徑srcset: 含有圖片列表及其特性，用逗號分隔-
1x,2x: 指定縮放比例，例如1x為標準解析度，2x為高像素密度設備
srcset 使用範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>srcset 使用範例</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
alt="自適應圖片範例">
</body>
</html>
程式碼解釋：
src="images/default.jpg": 指定預設圖片-
srcset: 含有指定圖片及其寬度(480w,800w,1200w)的列表。 瀏覽器根據視窗寬度選擇最合適的圖片
5.2 屬性 sizes
屬性 sizes 與 srcset 結合使用，用於指定圖片在不同顯示條件下的寬度。這能讓瀏覽器更精確地選擇合適的圖片。
語法：
HTML
<img src="default.jpg"
srcset="image1.jpg 480w, image2.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="Example Image">
解釋：
sizes: 含有顯示條件與相應圖片寬度的列表(max-width: 600px) 480px: 如果視窗寬度小於或等於600px，使用寬度480px的圖片800px: 其他情況使用寬度800px的圖片
sizes 使用範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sizes 使用範例</title>
<style>
.responsive-img {
width: 100%;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="自適應圖片範例">
</body>
</html>
程式碼解釋：
sizes 用於定義不同顯示條件下的圖片寬度：
- 如果視窗寬度小於或等於
600px，使用寬度480px的圖片 - 如果視窗寬度小於或等於
900px，使用寬度800px的圖片 - 其他情況使用寬度
1200px的圖片
5.3 自適應圖片
為不同螢幕尺寸設計的自適應圖片
讓我們創建一個範例，其中圖片會使用 srcset 和 sizes 屬性來適應不同的螢幕尺寸。
範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自適應圖片</title>
<style>
.responsive-img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="自適應圖片範例">
</body>
</html>
程式碼解釋：
src="images/default.jpg": 指定預設圖片srcset: 定義三種不同寬度的圖片版本 (480w,800w,1200w)-
sizes: 定義不同顯示條件的圖片寬度：- 小於或等於
600px，使用寬度480px的圖片 - 小於或等於
900px，使用寬度800px的圖片 - 大於
900px，使用寬度1200px的圖片
- 小於或等於
-
.responsive-img: CSS 類別，將圖片設定為寬度100%並自動調整高度，使其佔據可用空間並保持比例
GO TO FULL VERSION