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%高度會被壓縮