Chapter 03無料公開

- 要素の縦横比を維持する(頻出度:★★★)

hideki_climax
hideki_climax
2022.08.30に更新
このチャプターの目次

概要

少し古いSafariを無視できるならaspect-ratioを使いましょう。

.Sample { 
  aspect-ratio: 16 / 9; /* 横幅:高さを16:9にしたい場合 */ 
}

しかし残念ながら、多くの場合そうもいかないでしょう。そこでpadding-topを使った方法を紹介します。
padding-topは%で指定を行う時、親要素の横幅を基準にします。よって後述のコードのように指定すると比率を維持した要素が作れます。

padding-topの値は次のように計算した値を使います。

縦の比 / 横の比 * 100%

ただし、padding-topを使っているということは中の要素はその分下に押し出されます。そこでpositionを使って中の要素の位置を調整します。

デモ

デモサイトはこちら。
https://itokoba.com/demos/flexible-thubmnail/

コード

index.html
<div class="Box"> 
  <div class="Box__Inner"> 
    <div class="Box-Content"> 
      <div class="Box-Content-Text">ダミーテキスト</div> 
    </div> 
  </div> 
</div>
style.css
.Box {
  width: 50%; /* この横幅が.Box__Innerのpadding-topの基準になります。 */
  background-color: #ddd;
}

.Box__Inner {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 100%だと1:1になります。 */
}

.Box-Content {
  position: absolute; /* padding-topで押し出されるので、それを戻す。 */ 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 中のレイアウトは自由 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中の要素も自由にレイアウトできる */
.Box-Content-Text {
  width: 80%;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #707070;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

解説

.Boxと.Box__Innerが要素の比率を維持するのに直接関わっている部分です。
.Box__Innerのpadding-topに%で指定するのがポイントです。これが親要素、今回で言えば.Boxの横幅を基準に割合が計算されます。

上記の例では1:1にしていたので100%としていましたが、他の比率にしたい場合は前述の通り以下の計算式になります。

縦の比 / 横の比 * 100%

例) 16:9にしたい場合
9 / 16 * 100% = 56.25%

calcでそのまま指定しても良いでしょう。

padding-top: calc(9 / 16 * 100%)

これでどんな画面幅になっても要素の比率を維持することができます。