如今，網站中大圖片廣泛應用，但是如何讓它們在小框里顯示呢？這時就需要用到CSS。

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

以上是最常用的代碼，其實很容易理解，我們把它一點點分解：

max-width: 100%;

這一句話的含義是圖片的最大寬度不超過其容器的寬度，也就是自適應，無論如何調整瀏覽器大小，圖片都會跟著調整，避免了圖片變形。

height: auto;

這一句話的含義是圖片的高度按比例自動調整，保證圖片不變形且不會超出容器高度。

接下來，我們看一個實例：

.container {
width: 500px;
height: 500px;
overflow: hidden;
}
.container img {
max-width: 100%;
height: auto;
}

這里，我們設置了一個容器的大小，容器大小超過圖片大小，這樣圖片就可以自動適應容器大小。

最后呈現的效果是：


這樣，我們就可以讓大圖片放到小框里了！