如何利用css實現(xiàn)圖片等比例縮放？

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

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

2、然后，打開瀏覽器查看縮放圖片效果，如下圖。

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

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

擴充資料：

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

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

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