在網頁設計中，經常會使用圖片來增加頁面的美觀度。但是不同設備的屏幕大小和比例不同，圖片大小也因此出現(xiàn)了不同的尺寸，這就要求我們把圖片進行自適應，也就是根據(jù)屏幕大小和比例自動調整圖片大小，使之完美展示。

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

如上所示，在 CSS 中，我們可以使用max-width和height:auto來讓圖片實現(xiàn)自適應。

其中，max-width:100%意味著最大寬度不超過容器的寬度，讓圖片大小根據(jù)容器寬度自適應；而height:auto則保證在寬度改變的情況下，高度也能隨之自適應。

以上這段代碼可以適用于所有圖片，不管圖片的大小或者尺寸如何，它們都會被自動調整到合適的大小，無需再為每種圖片設置不同的尺寸。

除此之外，我們還可以通過媒體查詢（Media query）來讓圖片在不同設備上展示不同的大小，或者調整圖片在不同屏幕上的布局，提高用戶體驗。

@media screen and (max-width:480px){
img{
max-width:50%;
}
}

如上代碼表示，在屏幕最大寬度為 480px 的情況下，圖片最大寬度設置為容器寬度的 50%。

在設計網站的過程中，好的排版以及合適的圖片尺寸都是非常重要的，通過掌握圖片自適應的方法，我們可以讓網站在不同的設備上達到最佳展示的效果。