画像を画面に収めるCSS（ちょっと良いUIおれおれAdvent Calendar 2024 – 01日目）

何かの記事の途中に画像載せるじゃないですか、まあまあ大きい画像にするじゃないですか、見てる画面によっては上下切れちゃったりしてるの見かけるんですよね。もったいないなと思います。

CSS で収まるようにしておきましょう。

画像を画面に必ず収める CSS

.theImage {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

デモ：

vh, vw はビューポートの高さ、幅を 100 分割した値です。要は画面に対するパーセントみたいなものです。

100 だといっぱいで見づらいので少しだけ余白を取ると良いでしょう。またスクロールしても上部のナビゲーションバーが付いてきたりする構成になっている場合は、その分も減らしておきます。

今回は適当に 10 点減らしたけど calc(100vh - 16px) みたいにしても良いかも。

object-fit は画像を <img> 要素が取る矩形に対して画像をどう表示するかを指示します。普通は縦横いっぱいに広り縦横比がなんかぐちゃってなったりしますがそこらへんの指定です。

他の指定次第で画像の縦横比が想定のものからずれることがあるので付けておきます。

vw, vh の他に svw, lvw, dvw なんかもあります。まだ使ったことないや。