css简单代码实现正方形

发表于 | 分类于

简单代码实现正方形：

1
div{padding: 50%}

应用案例：
很多移动端app头图1:1，屏幕尺寸大小不固定，让所有的屏幕大小下都是正方形。

1
2
3
4
5
6
<div class="container">
	<div class="example">
		<h2>hello</h2>
		<h4>other info</h4>
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container{
	padding:50%;
	background:url(exp.jpg);
	background-size:100%;
	position:relative;
}

.example{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

效果图

内容参考来自张鑫旭的慕课网视频：(http://www.imooc.com/video/12598 ).