css實現div中圖片高度自適應並與父級div寬度一致

需求：1.父級div不設置高度

　　　2.圖片高度自適應，而且顯示爲正方形；

之前遇到列表中圖片高度必須和父級寬度相同，而且須要爲正方形的時候，最開始的方法是定死圖片高度，這樣會致使不一樣分辨率下圖片會壓縮，後來傻傻的用js來控制圖片的高度，直到如今才明白幾句css就能搞定，而且徹底符合要求。。。。。。

例子：

1.html

<ul>
    <li class="bli">
        <div class="imgbox">
            <img src="upimg/comm.png"/>
        </div>
        <p>喵喵喵喵喵喵111</p>
    </li>
    <li class="bli">
        <div class="imgbox">
            <img src="upimg/comm1.png"/>
        </div>
        <p>喵喵喵喵喵喵222</p>
    </li>
    <li class="bli">
        <div class="imgbox">
            <img src="upimg/comm2.png"/>
        </div>
        <p>喵喵喵喵喵喵333</p>
    </li>
</ul>

2.css

ul{
    overflow: hidden;
}
.bli{
    float: left;
    width: 49%;
    margin:0 2% 2% 0;
    background: white;
    outline: 1px solid red;
}
.bli:nth-child(even){
    margin-right: 0;
}
.imgbox{
    position: relative;
    overflow: hidden;
    padding-bottom: 100%;/*重要屬性*/
    outline: 1px solid green;
}
.imgbox img{
    width: 100%;
    position: absolute;
}

說明：裝圖片的盒子imgbox，設置的padding-bottom，當該值爲百分比屬性時，是基於父元素寬度的百分比，因此這裏設置100%的時候，就至關於造成了一個正方形。

　　　固然，也能夠設置padding-top。這時img就須要設置top:0;了。記得img要設置100%寬度哦。

　　　這個方式和js的先獲取父級div寬度再設置圖片高度相比方便太多太多了。

效果圖：

上面全部li的高度都未定死，可是都是同樣的高度，圖片很長或者很寬，都不影響佈局，主要是overflow:hidden隱藏了。這樣設置以後，頁面無論怎麼變化，圖片高度也會動態隨之變化。

 

 

擴展：若是想實現，寬高必定比例好比16:9，寬度自適應100%的div呢？

再囉嗦一句：padding當爲百分比屬性時，是基於父元素寬度的百分比的。

那麼：我設置寬度爲100%的時候，按比例算，高度大體就是（100% * 9）/16   ，這樣算的話，padding-bottom的值就是56%

1.html

<div class="box">
    <img src="upimg/comm.png"/>
</div>
<div class="box">
    <img src="upimg/comm1.png"/>
</div>
<div class="box">
    <img src="upimg/comm2.png"/>
</div>

以上是3張圖片，每一個圖片的大小分別是：216X216，330X180，180X330

2.CSS

.box{
    width: 100%;
    margin: 20px auto;
    background: skyblue;
    position: relative;
    padding-bottom: 56%;       //這是重要屬性
    overflow: hidden;
}
.box>img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

 

效果：

在398px寬度的時候，高度都爲222.88px，算下來比例就是16:9

在瀏覽器寬度發生變化時，能自適應百分百寬度，而且保證比例不會變化

 注：也能夠設置圖片高度爲100%，我上面未設是由於原圖比例不是16:9，設置100%高度會被壓縮