s.y. sample

html memo-横幅に合わせた正方形の作り方-

ついでに、中身も中央寄せ。

[HTML]

<div class="outside">
	<div class="inner">
		中身。
	</div>
</div>

[CSS]

.outside {
	width: 100%;
	position: relative;
}
.outside::before {
	display: block;
	content: "";
	padding-top: 100%;
}
.inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}

※width: 100%;とpadding-top:100%;はそれぞれ変更すると形が変わる。
　width:80%;padding-top:100%;だと横幅80%の正方形。

　アスペクト比をコントロールということで、
　高さ　÷　幅　×　100
　で算出した数値をpadding-topに入力すれば、それぞれ好きな比率の四角が作れる。

　ex) 4:3のアスペクト比
　3　÷　4　×　100　=　75
　padding-top: 75%;