読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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

HTML HTML5 CSS Responsive Design
f:id:kikiki-kiki:20160715162810p:plain

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

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

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
  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

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

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

 

レスポンシブな正方形を作って、その中にコンテンツをセンタリングさせることは一旦できたのですが、画像の高さを最大でエリアの高さにする方法を見つけることができていません。
後は、なぜpadding-top: 100%で親エリアの幅が取得できるのかが、謎…


[参考]