CSS图⽂列表中图⽚以正⽅形显⽰从例⼦⾥发现元素的  的百分⽐数值是根据当前元素的宽度来计算的，于是可以利⽤这个特性来做⼀些特殊布局。正⽅形只是矩形的特殊形式，所以需要⼀定宽⾼⽐例的矩形也可以⽤这个⽅法。<style type ="text/css">
.figure-list {
margin : 0;
padding : 0;
}
.figure-list :after{
content : "";
display : block;
clear : both;
margin属性值可以为百分比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 {
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.su.bdimg/skin/19.jpg)">
<a href ="#"></a>
</figure>
</li>
<li>
<figure style ="background-image:url(5.su.bdimg/skin/3.jpg)">
<a href ="#"></a>
</figure>
</li>
</ul>
padding

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。