【CSS】画像サイズを比率固定して縮小する方法

画面幅を変えてもサイズをの比率を維持して表示したい時ありますよね。

比率を維持して表示することによって、レスポンシブ対応することが可能になります。
なので、幅によっていちいち画像のサイズを変更する必要が無くなり楽ちんです。

今回はパーセンテージで画像サイズを維持する方法を紹介します。

画像サイズを比率固定して縮小する方法

比率固定した画像

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

上記をご覧ください。
左側が「画像サイズで比率固定」したもので、右側が「トリミングして比率固定」したものです。

コードの解説

画像サイズで比率固定

.img-1 img {
  width: 100%;
  height: auto;
}

幅を100%にして親要素いっぱいにしています。
親要素幅も%で指定しているので、幅を狭くすると自動的に画像サイズも比率を維持して小さくなります。

こちらは画像のサイズに依存しているので、必要に応じて画像をトリミングしなくてはならず面倒です。

トリミングして比率固定

/* 画像を包む親要素 */
.img-2__wrap {
  position: relative;
}

/* サイズの指定 */
.img-2__wrap::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* beforeのサイズにハメ込む */
.img-2__wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

トリミングする際に画像に対して親要素を作ります。（.img-2__wrap）
親要素に対して「before」で形を作ります。今回は正方形にしています。

/* サイズの指定 */
.img-2__wrap::before {
  content: "";
  display: block;
  padding-top: 100%;
}

「padding-top」で高さをだします。これは幅の何％かを指定しています。
例えば「.img-2__wrap」の幅が100pxとしたら、それの100%で100pxとなります。（正方形になる）

/* beforeのサイズにハメ込む */
.img-2__wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

次に形を形成した要素に画像をはめ込みます。

親要素で「position: relative;」してるので、「position: absolute;」します。
次に位置を指定し、幅と高さを100%にします。これで、親要素全体に広がった状態です。

最後に表示する部分を指定します。
これで「before」で形どったサイズにトリミングされ、比率固定した状態になります。

サイズは必要に応じて変更してください。

まとめ

今回は自分が大苦戦して全く実装できなかったこともあり、復習としてまとめました。
この形の実装はよくあると思うので覚えておいて損はないと思います。

参考になれば幸いです。ありがとうございました。