CSSで縦横比を維持したまま拡大・縮小できる領域を作成

あまりない状況かもしれませんが、画面の縦と横の比率（アスペクト比）を変えずに、拡大・縮小したいことがありました。
よく考えてみると、画像の幅を100%で表示すると似たような動きになりますよね？
しかし、画像だけではなく、コンテンツ領域全体のアスペクト比を固定する方法をご紹介します。

アスペクト比を固定する方法

単純に縦横比を固定するだけなら、以下のように書けば良いです。

HTML

<div class="content">ここにコンテンツが入ります</div>

CSS

.content {
  width: 100%;
  height: auto;
  padding-top: 75%;
}

75%がどこから来たかと言いますと、

[高さ] / [横幅] × 100

の計算式で求めることができます。
つまり、4:3で固定したい場合は、

3 / 4 * 100 = 75%

となります。

CSSのcalc()関数を使うと楽

padding-topの値を計算するのは面倒という方に、CSS内で計算ができるcalc()関数を使えば、わざわざ計算しなくても縦横比だけで設定できます。
使い方は簡単！
上記の計算式をそのまま括弧内に入れてあげれば完成です。

padding-top: calc(3 / 4 * 100%);

コンテンツも加えたい

もうお気付きかと思いますが、padding-topを使っているので、このままではアスペクト比を固定した領域にコンテンツを追加することはできません。
せいぜい、バックグラウンドで画像を表示するくらいしか使い道がありません。
そこで、「position」プロパティと擬似要素の「:before」を利用して解決します。

HTML

先程のコンテンツを囲むラッパーを作ります。

<div class="wrapper">
  <div class="content">ここにコンテンツが入ります</div>
</div>

CSS

ラッパーのpositionはrelative、:beforeに先程と同じpadding-topを設定し、コンテンツのpositionをabsoluteにします。

.wrapper {
  position: relative;
  width: 100%;
}
.wrapper:before {
  content: "";
  display: block;
  padding-top: calc(3 / 4 * 100%);
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

これでアスペクト比を固定したままコンテンツを追加できる領域が作成できました。

• Original:https://minory.org/css-aspect.html
• Source:Minory
• Author:管理者

Amazonベストセラー