CSS + 圖片縮放的技巧

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

想必各位前端小伙伴在進行響應式設計時，一定會遇到圖片大小不一，需要根據不同的屏幕適配不同大小的問題。那么我們就可以利用CSS來對圖片進行縮放。

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

上述代碼中，將圖片的最大寬度設置為100%，高度根據比例自適應。這種方法對于大型的圖片來說比較有用，因為不會將圖片拉伸過度。但是，如果該圖片已經進行了尺寸優化，那么就會浪費該優化的效果。

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

這是相對于第一種方法而言的一種更好的方法，因為該方法不僅適用于大型圖片也適用于小型圖片。它會將所有圖片寬度設置為屏幕寬度，并根據比例來自適應高度。

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

當圖片的尺寸小于屏幕寬度時，可以使用此方法。此時，圖片的尺寸將被設置為自適應，而最大寬度和最大高度為100%。這樣做的效果是，當圖片尺寸比屏幕小時會將其放大，當圖片尺寸比屏幕大時則不會有任何改變。

總之，以上3種CSS方法可以根據圖片大小進行縮放，根據所需效果來選擇哪一種方法都可以。