CSS 響應式圖片是我們在網站中常用的一種重要技術，它可以根據不同的設備和瀏覽器窗口大小自動調整圖片的大小，以更好地適應不同的終端設備。

使用 CSS 響應式圖片可以有效的提升用戶體驗，同時也可以避免因為圖片太大導致網頁加載緩慢的問題。下面我們將介紹如何使用 CSS 來實現響應式圖片的大小調整。

// HTML 代碼
<img src="example.jpg" class="responsive-image" alt="example">
// CSS 代碼
.responsive-image {
max-width: 100%; // 圖片最大寬度為 100%
height: auto; // 高度自動適應
}

在這個代碼中，我們首先在 HTML 中添加了一個圖片元素，并指定了圖片的源代碼和一個 class 名稱名為‘responsive-image’。

接著，我們在 CSS 中為這個 class 名稱定義了一些屬性，最關鍵的是 max-width 和 height 兩個屬性。max-width 屬性規定圖片的最大寬度，而 height 則是自動適應調整高度。

當瀏覽器窗口或終端設備的寬度發生變化時，圖片的寬度也會隨之自動調整，從而實現了圖片大小的響應式調整。

總之，利用 CSS 響應式圖片技術可以讓你的網站更好地適應不同的設備和瀏覽器窗口大小，從而提升用戶體驗和提高網站的性能。