該方法主要用來做網站自適應的，同時可以實現撐起內容高度，避免圖片載入後導致的頁面滾動。

一、可以使用js判斷圖片的寬度得到具體數值之後，再來利用js設定圖片的高度（這裡就不具體為大家細說了）。

利用js來實現有一個缺點就是隻能在頁面重新整理的時候才能調整圖片的高度，不能隨著瀏覽器的視窗大小變化來實現自適應。

二、我這次主要是用css來實現圖片高度的自適應問題。

下面是所需要的程式碼

（這種方法是可以在圖片上方垂直居中展示文字的，如果不需要可以選擇最下方更簡潔的程式碼）

<div class="box">
	<span>行內元素垂直居中</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;	/*必須要有數值，否則無法把高度撐起來*/
	vertical-align: middle;
}
 

2、其次要說明的就是我們引用的圖片是通過絕對定位來佈局的，這樣才能使圖片跟隨其父元素的大小改變來實現自適應。

另一種簡潔的方法就是直接在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;
}