div或img圖片高度隨寬度自適應,divimg寬度自適應

來源:互聯網
上載者:User

div或img圖片高度隨寬度自適應,divimg寬度自適應

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





著作權聲明:本文為博主原創文章,如需轉載請在評論區留言說明。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: