首頁 > web前端 > css教學 > 怎樣用CSS使圖片高度自動縮放比例

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

php中世界最好的语言
發布: 2017-11-28 11:21:07
原創
3351 人瀏覽過

我們知道,在瀑布流這類的圖片列表佈局中常常可以看到用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的方法

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

#

以上是怎樣用CSS使圖片高度自動縮放比例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板