該方法主要用來做網(wǎng)站自適應的，同時可以實現(xiàn)撐起內(nèi)容高度，避免圖片加載后導致的頁面滾動。
一、可以使用js判斷圖片的寬度得到具體數(shù)值之后，再來利用js設置圖片的高度（這里就不具體為大家細說了）。
利用js來實現(xiàn)有一個缺點就是只能在頁面刷新的時候才能調(diào)整圖片的高度，不能隨著瀏覽器的窗口大小變化來實現(xiàn)自適應。
二、我這次主要是用css來實現(xiàn)圖片高度的自適應問題。
下面是所需要的代碼
（這種方法是可以在圖片上方垂直居中展示文字的，如果不需要可以選擇最下方更簡潔的代碼）
<div class="box"> <span>行內(nèi)元素垂直居中</span> <div class="img-box"> <img src="123.jpg"/> </div></div>
.box{ width: 50%; margin: 50px auto;}.img-box{ width: 100%; position:relative; z-index:1;}.img-box img{ position:absolute; top:0; bottom:0; left:0; right:0; width:100%; margin:auto; z-index: -1; *zoom:1;}.img-box:before { content: ""; display: inline-block; padding-bottom: 100%; width: 0.1px; /*必須要有數(shù)值，否則無法把高度撐起來*/ vertical-align: middle;}1、這里主要為大家說明的就是padding-bottom這個屬性，當它的值為百分比的時候，是按該元素的寬度來計算的。所以當設為100%的時候，其高度就等于自身的寬度，形成一個正方形。當然，這個數(shù)值可以根據(jù)實際情再進行調(diào)整。
2、其次要說明的就是我們引用的圖片是通過絕對定位來布局的，這樣才能使圖片跟隨其父元素的大小改變來實現(xiàn)自適應。
另一種簡潔的方法就是直接在img的父元素上加padding-bottom就行了
<div class="img-box"> <img src="123.jpg"/></div>
.img-box{ padding-bottom:100%;}.img-box img{ position:absolute; top:0; bottom:0; left:0; right:0; width:100%; margin:auto;}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
