CSS——實現圖片等比例正方形顯示,宮格排列

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

像微信朋友圈一樣,新增圖片的時候,等比例正方形顯示在列表中,如何讓圖片根據寬高來自適應顯示在頁面上呢?示例如下:

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />  
<style type="text/css">
.figure-list{
margin: 0;
padding: 0;
}
.figure-list:after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.figure-list li{
list-style: none;
float: left;
width: 23.5%;
margin: 0 2% 2% 0;
}
.figure-list figure{
border: 1px solid #000;
position: relative;
width: 100%;
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%; /* 關鍵就在這裡 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.figure-list figure a{
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
</style>
<ul class="figure-list">
<li>
<figure style="background-image:url(1.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(2.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(3.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(4.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(5.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(6.png)">
<a href="#"></a>
</figure>
</li>
</ul>
</html>  

相關文章

程式語言 最新文章