當前位置:編程學習大全網 - 源碼下載 - 怎樣用CSS使圖片高度自動縮放比例

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

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

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

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

.imgbox img{width:252px}

就這樣簡單CSS選擇器即可控制DIV盒子“.imgbox”裏圖片寬度,而沒有設置CSS高度(height)樣式,這樣默認圖片就會自適應寬度等比例縮放了。

小結:

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

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

相信看了這些解析妳已經掌握了方法,更多精彩請關註Gxl網其它相關文章!

相關閱讀:

怎樣讓DIV自適應高度

在HTML裏用CSS隱藏div的方法

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

  • 上一篇:svn如何導入源代碼?
  • 下一篇:(2014?市北區壹模)歸納式探究:如圖1所示,在研究磁場對電流作用的實驗中,將直導線換作壹塊厚度為b、
  • copyright 2024編程學習大全網