怎樣用CSS使圖片高度自動縮放比例

我們知道，在瀑布流這類的圖片列表布局中常常可以看到用CSS控制DIV裡的圖片寬度高度，其實這樣的布局很簡單，今天就給大家詳細講解一下。

當遇到這樣的DIV CSS布局時候，其實非常簡單，我們只需要對圖片寬度進行控制，而圖片高度不用設定即圖片高度會自動適應縮放比例（不設定高度即高度值預設為auto自適應）。

如，加入一個CSS命名為“.imgbox”的DIV盒子裡圖片寬度為252px,這個時候對應如何寫CSS讓對象裡圖片高度自動根據寬度縮放比例：

.imgbox img{width:252px}

就這樣簡單CSS選取器即可控制DIV盒子“.imgbox”裡圖片寬度，而沒有設定CSS高度（height）樣式，這樣預設圖片就會自適應寬度等比例縮放了。

小結：

對於新手來說，可能忘記了寬度、高度如果不設定預設是自適應這一特性，所以可能遇到設定圖片寬度，就想一定要給予設定高度這樣的固化思維。其實在CSS布局中圖片寬度固定、高度自適應這種要求情況下，CSS只需設定寬度值，高度就不用添加設定即可達到想要布局效果。

在布局中如果圖片高度和寬度都是固定不變的，無論圖片多大什麼比例，布局的圖片寬度高度是固定的，這種情況下就需要同時對圖片設定固定寬度和高度值。

相信看了這些解析你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎樣讓DIV自適應高度

在HTML裡用CSS隱藏div的方法

詳解前端響應式布局、響應式圖片，與自製柵格系統