画像の高さを固定して横幅だけ伸縮させる方法

Webサイトを構築する際に、画像を画面幅や親要素の幅いっぱいに広げて表示させることがあります。レスポンシブWebデザインの場合は、デバイスのサイズに合わせて縦横比を保ったまま画像が伸縮するような設定をします。普通に伸縮させるのであれば、画像の横幅を100%で指定すれば良いのですが、場合によっては画像の高さは固定したままで、横幅だけ伸縮させたいという場合もあります。そのようなときに使えるCSSテクニックを紹介します。

高さを固定したまま可変させるには?

通常、画像の高さを固定して横幅いっぱいに広げてしまうと、画像が縦に潰れたように表示されてしまいますが、「object-fit」というプロパティを使うことにより、潰れることなくきれいに表示されるようになります。背景画像で表示させる場合に使う「background-size:cover;」と同じような感じで、img要素でも表示させることができるということです。

img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

このように、object-fitプロパティの値に「cover」を指定することで、高さを固定しても画面幅や親要素の幅に合わせて画像が伸縮するようになります。

その他の記事
レスポンシブWebデザインの基本
【CSS】画像を文字で切り抜く
backdrop-filterで効果をつける
【WordPress】カスタムフィールドの使い方
画像の下にできる余白を消す方法

TOP