浏览模式: 普通 | 列表
4月, 2015 | 1

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%;
...

阅读全文…
<img src="1.jpg" style="clip:rect(10px 100px 90px 20px);position: absolute;width: 100px;" />
1