在網頁設計中，我們經常需要使用圖片來豐富頁面的內容，但是圖片的大小不一定適配不同屏幕尺寸，這就需要我們使用 CSS 來讓圖片顯示自適應。

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

上面這段 CSS 代碼使用了 max-width 屬性來讓圖片的最大寬度等于容器的寬度，由于高度是自適應的，所以圖片的比例會保持不變。這樣可以讓圖片在不同屏幕尺寸下都能夠自適應顯示，不會出現圖片變形或溢出的情況。

除了使用 max-width 屬性，我們還可以使用 object-fit 屬性來控制圖片的填充方式。該屬性用于設置當圖片的寬高比與容器不一致時如何縮放顯示。

img {
width: 100%;
height: 300px;
object-fit: cover;
}

上面這段 CSS 代碼中，我們將圖片的寬度設置為容器的 100%，高度設置為 300px。然后使用 object-fit 屬性來設置圖片的填充方式為 cover，即讓圖片填滿容器并保持比例完整顯示。

通過以上幾種方式的使用，我們可以讓圖片在網頁中更好的展示，并且達到自適應的效果。