【CSS】object-fitを使って高さ固定したまま横幅を可変させる方法

サイトのメインビジュアルをコーディングする際、

画像を画面幅いっぱいに広げて表示させたい時ありますよね？

しかもレスポンシブに対応させるために、

横幅は可変させて、でも画面の高さは固定した状態にしたい・・・！！

そんな時、使えるのがobject-fitプロパティです！

今回は高さは固定させた状態で、横幅は可変させる方法を解説します！

object-fitプロパティの基本的な使い方は

他記事で解説してますので、気になる方はそちらもご覧ください。

高さを固定値にして横幅を可変させる場合

横幅を可変させる場合、width:100%を使うと思います。

高さは固定させたいのでピクセルで固定値を指定します。

しかし、そうすると画像が潰れた状態になってしまっていますね。

See the Pen dbject-fit高さ固定 by kanae (@suzukana) on CodePen.

img {
  width: 100%;
  height: 300px;
}

このような場合にobject-fit: cover;を使うと

アスペクト比を保ったまま表示することが出来ます。

See the Pen object-fit高さ固定２ by kanae (@suzukana) on CodePen.

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

これでアスペクト比が崩れることなく表示できましたね。

高さをピクセル値で指定しているので、

今回の場合は画像の高さが300pxより大きいのでリサイズされています。

こういった場合、画像のどこを基準にして表示させるか指定することもできます。

画像の表示位置を指定したい場合はobject-positionプロパティを使ってみてください。

object-positionプロパティについてはこちらで解説しています。

いかがでしたか？

object-fit: cover;を指定するだけで簡単に実装ができましたね。

object-fitの便利な使い方の一例でした！