分类: H5/JS/CSS

CSS百分比自适应正方形

[ 2015-04-08 11:06:33 | 作者: admin ]
字号: 大 | 中 | 小
当遇到不确定宽高图片要统一风格显示最好的办法就是处理成正方形，就像Instagram。但是如何用CSS的方式得到一个不确定宽度的正方形容器就成了问题，尤其是要适应响应式的设计里。

后来到群里从小罗那问到了答案： 用 padding 属性来处理 。看例子：
<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{
     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(http://1.su.bdimg.com/skin/19.jpg)">
             <a href="#"></a>
         </figure>
     </li>
     <li>
         <figure style="background-image:url(http://5.su.bdimg.com/skin/3.jpg)">
             <a href="#"></a>
         </figure>
     </li>
</ul>
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2272

这篇日志没有评论。

此日志不可发表评论。