html5中div或img圖片高度怎么隨寬度自適應

本篇內容主要講解“html5中div或img圖片高度怎么隨寬度自適應”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html5中div或img圖片高度怎么隨寬度自適應”吧!

一、可以使用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;
}

1、這里主要為大家說明的就是padding-bottom這個屬性，當它的值為百分比的時候，是按該元素的寬度來計算的。所以當設為100%的時候，其高度就等于自身的寬度，形成一個正方形。當然，這個數值可以根據實際情再進行調整。
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;
}

到此，相信大家對“html5中div或img圖片高度怎么隨寬度自適應”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！