在CSS中，可以使用max-width屬性配合百分比或viewport單位來實現響應式圖片。這樣，圖片可以根據瀏覽器窗口的大小自動調整其尺寸。以下是兩種實現方法：
方法一：使用百分比
將圖片的寬度設置為百分比值，如width: 100%;。這樣，圖片寬度將始終適應其父元素的寬度。示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="your-image-source.jpg" alt="Responsive Image">
</body>
</html>
方法二：使用viewport單位
使用vw（viewport width）單位可以根據瀏覽器窗口的大小動態設置圖片寬度。例如，將圖片寬度設置為width: 50vw;意味著圖片寬度將始終為視口寬度的50%。示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 50vw;
height: auto;
}
</style>
</head>
<body>
<img src="your-image-source.jpg" alt="Responsive Image">
</body>
</html>
這兩種方法都可以實現響應式圖片處理，根據實際需求選擇合適的方法。
