レスポンシブデザインでも使えるアスペクト比を固定したボックス要素

[1] アスペクト比の固定方法

アスペクト比を固定するには、横幅に対する高さをpadding比率で取ってあげるだけです。

基本構文はこちら

.aspectwrapper {
position: relative;
width:50%;
background:#000000;
}
.aspectwrapper:after{
padding-top: 100%;
display: block;
content: “”;
}
.aspectwrapper > .content{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}

aspectwrapperクラスのwidthに対して、::after要素で高さを固定し、contentクラスが内部の位置を固定してくれるといった作りです。

[2] 実装結果

代表的なデザインバランスを持ったものを作ってみました。『スクエア』『白金比』『白銀比』『黄金比』は視覚的な印象が良いので、是非参考にしてみて下さい。