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

スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。

レスポンシブの正方形を作る

vmin という単位を利用する方法

調べていると、widthとheightにvminという単位を使って、レスポンシブの正方形を作る方法がありました。

HTML

<div class="squareBox">
  <div class="content"></div>
</div>

.squareBox
  /* margin 30px */
  width: calc(100vmin - 60px)
  height:  calc(100vmin - 60px)

参考: css3でレスポンシブな正方形を作る - Qiita

この方法は、calcに対応しているブラウザの問題と、ボックスが1つなら良いのですが複数並べたい時に正方形を維持させるのが難しかったです。

:before 属性を利用して正方形を作る

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

HTML

<div class="squareBox">
  <div class="content"></div>
</div>

.squareBox
  position: relative
  &:before
    display: block
    content: ''
    padding-top: 100%
  
  .content
    position: absolute
    top: 0
    width: 100%
    height: 100%
    box-sizing: border-box

See the Pen Respoinsive Square Box by KIKIKI (@chaika-design) on CodePen.

この方法なら、ボックスの幅と高さを簡単に調整することができます。

レスポンシブな正方形の中に画像を中央配置させたい。

次に、画像の幅が足りない時はセンターに、高さが足りない時は上下中央配置にさせたいと思います。
画像の高さと幅が固定なのであれば、よくあるセンタリングの方法でOKです

HTML

<div class="squareBox">
  <div class="content"><img class="thumb" src="/path/iamge.png"></div>
</div>

.thumb
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: 0
  width: {image width}
  height: {image height}

画像の高さと幅を固定してしまうなら良いのですが、画像のwidthを100%にしたい場合は、上記の方法では上手くセンタリングすることができません。

画像の幅を可変にしてセンタリングさせたい。

table, table-cellを使う方法

HTML

<div class="squareBox">
  <div class="content">
    <div class="centerTable">
      <div class="tableCell">
        <img class="thumb" src="/path/iamge.png">
      </div>
    </div>
  </div>
</div>

.squareBox
  position: relative
  &:before
    display: block
    content: ''
    padding-top: 100%
  
  .content
    position: absolute
    top: 0
    width: 100%
    height: 100%
    box-sizing: border-box
    // 画像がエリアからはみ出さないようにする
    overflow: hidden

.thumb
  width: 100%
  height: auto

.centerTable
  display: table
  // ID display: table, table-cell 内で max-width が効かないバグを回避する
  table-layout: fixed
  text-align: center
  width: 100%
  height: 100%
   > .tableCell
    display: table-cell
    vertical-align: middle

※ 画像の高さがエリアの高さより大きい場合、画像の下部分が見切れる

transform を使う方法

HTML

<div class="squareBox">
  <div class="content">
    <div class="centerBox">
      <img class="thumb" src="/path/iamge.png">
    </div>
  </div>
</div>

.squareBox
  position: relative
  &:before
    display: block
    content: ''
    padding-top: 100%
  
  .content
    position: absolute
    top: 0
    width: 100%
    height: 100%
    box-sizing: border-box
    // 画像がエリアからはみ出さないようにする
    overflow: hidden

.thumb
  width: 100%
  height: auto

.centerBox
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  width: 100%
  height: auto