在工作中經常需要對圖片進行縮放，但有些縮放會讓圖片變形，所以今天就給大家介紹介紹CSS如何實現圖片等比例縮放不變形，想知道的小夥伴看過來！

1、我們可以給圖片的img標籤設定width或者height的任意一個，圖片會自動等比例縮放。下面是程式碼如圖。

2、然後，開啟瀏覽器檢視縮放圖片效果，如下圖。

3、我們還可以使用CSS3方法，transform的scale 來縮放圖片。如圖。

4、最終縮放效果如下圖所示。

擴充資料：

如果你想設定圖片的高度和寬度都不超過某一個固定值，就需要在圖片高度或寬度超過這個值的時候，讓圖片按比例縮小到這個尺寸。

1、對於現代瀏覽器，比如Firefox或是IE7及以上，直接使用max-width和max-height兩條CSS屬性即可。

2、對於IE 6.0及以下版本，以上兩條CSS屬性均不會被理會。之前處理這種事情，我們往往會藉助Javascript。