怎么實現(xiàn)圖片高度隨寬度自適應(yīng)

本篇文章為大家展示了怎么實現(xiàn)圖片高度隨寬度自適應(yīng)，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、陽高ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的陽高網(wǎng)站制作公司

一、可以使用js判斷圖片的寬度得到具體數(shù)值之后，再來利用js設(shè)置圖片的高度（這里就不具體為大家細(xì)說了）。

利用js來實現(xiàn)有一個缺點就是只能在頁面刷新的時候才能調(diào)整圖片的高度，不能隨著瀏覽器的窗口大小變化來實現(xiàn)自適應(yīng)。

二、我這次主要是用css來實現(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這個屬性，當(dāng)它的值為百分比的時候，是按該元素的寬度來計算的。所以當(dāng)設(shè)為100%的時候，其高度就等于自身的寬度，形成一個正方形。當(dāng)然，這個數(shù)值可以根據(jù)實際情再進(jìn)行調(diào)整。
2、其次要說明的就是我們引用的圖片是通過絕對定位來布局的，這樣才能使圖片跟隨其父元素的大小改變來實現(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)容就是怎么實現(xiàn)圖片高度隨寬度自適應(yīng)，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：怎么實現(xiàn)圖片高度隨寬度自適應(yīng)
分享路徑：http://muchs.cn/article8/ijodop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站導(dǎo)航、營銷型網(wǎng)站建設(shè)、軟件開發(fā)、Google、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)