HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。 - かもメモ

スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheightにvminという単位を使って、レスポンシブの正方形を作る方法がありました。 HTML <div class="squareBox"> <div class="content"></div> </div> CSS .squareBox /* margin 30px */ width: calc(100vmin - 60px) height: calc(100vmin - 60px) 参考: css3でレスポンシブな正方形を作る - Qiita この方法は、calcに対応しているブラウザの問題と、ボックスが1つなら良いのですが複数並べたい時

[nacika_inscatolare]

vmin 正方形

[tecateca_socks]

画像クリッピング擬似要素使って高さ保持

[uretaro]

":before 属性にpadding-top: 100%を与えると、ちょっと理由がよく分からないのですが、親ボックスのwidthの高さが得られるようなのでこれを利用します。"