該方法主要用來做網(wǎng)站自適應(yīng)的，同時(shí)可以實(shí)現(xiàn)撐起內(nèi)容高度，避免圖片加載后導(dǎo)致的頁面滾動(dòng)。
一、可以使用js判斷圖片的寬度得到具體數(shù)值之后，再來利用js設(shè)置圖片的高度（這里就不具體為大家細(xì)說了）。
利用js來實(shí)現(xiàn)有一個(gè)缺點(diǎn)就是只能在頁面刷新的時(shí)候才能調(diào)整圖片的高度，不能隨著瀏覽器的窗口大小變化來實(shí)現(xiàn)自適應(yīng)。
二、我這次主要是用css來實(shí)現(xiàn)圖片高度的自適應(yīng)問題。
下面是所需要的代碼
（這種方法是可以在圖片上方垂直居中展示文字的，如果不需要可以選擇最下方更簡潔的代碼）
<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這個(gè)屬性，當(dāng)它的值為百分比的時(shí)候，是按該元素的寬度來計(jì)算的。所以當(dāng)設(shè)為100%的時(shí)候，其高度就等于自身的寬度，形成一個(gè)正方形。當(dāng)然，這個(gè)數(shù)值可以根據(jù)實(shí)際情再進(jìn)行調(diào)整。
2、其次要說明的就是我們引用的圖片是通過絕對(duì)定位來布局的，這樣才能使圖片跟隨其父元素的大小改變來實(shí)現(xiàn)自適應(yīng)。
另一種簡潔的方法就是直接在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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
