html - 创建一个完美的正方形 div 响应式

Question

有没有办法创建一个完美的正方形 div，其边等于 document.body 的最小边？文档的宽度或高度。而且它必须具有响应能力。

Answer 1

试试这个:

.outer {
	width:100%;
	height:0;
	padding-top:100%;
	position:relative;
	background:#eee;
}

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

<div class="outer">
	<div class="inner"></div>
</div>