CSS object-fitプロパティを使いこなそう！

画像や動画をウェブサイトに配置する際、どのようにコンテナに収めれば良いか悩んだことはありませんか？
そんな時に役立つのが、CSSのobject-fitプロパティです。

object-fitプロパティを使えば、画像や動画を簡単にトリミングしたり、コンテナ全体にフィットさせたりすることができます。

object-fitプロパティの値

object-fitプロパティには、以下の値を指定することができます。

• contain: 画像の縦横比を維持しながら、コンテナ内に収まるように拡大縮小します。
• cover: 画像の縦横比を維持しながら、コンテナ全体を覆うように拡大縮小します。
• fill: 画像の縦横比を無視して、コンテナ全体を埋めるように拡大縮小します。
• none: 画像のサイズをそのまま表示します。
• scale-down: 画像の縦横比を維持しながら、コンテナよりも小さい場合は縮小します。

具体的な使い方

object-fitプロパティの使い方はとても簡単です。
以下のコードのように、画像要素のスタイルにobject-fitプロパティを指定するだけです。

.image-container {
        width: 350px;
        height: 250px;
      }
      
      .image {
        width: 100%;
        height: 100%;
        
        /* object-fit プロパティを指定 */
        object-fit: contain;
      }
  

上記の場合、画像はコンテナ内に収まるように拡大縮小され、縦横比が維持されます。

それでは、実際にobject-fitプロパティを使って、画像を様々な方法で配置してみましょう。

contain

contain: 画像をコンテナ内に収まるように拡大縮小します。

.image {
        object-fit: contain;
      }

左の200px×200pxのサンプル画像を、350px×250pxのコンテナにobject-fit:contain;を適用したものが右の図です。

cover

cover: 画像をコンテナ全体を覆うように拡大縮小します。

.image {
        object-fit: cover;
      }

左の200px×200pxのサンプル画像を、350px×250pxのコンテナにobject-fit:cover;を適用したものが右の図です。

fill

fill: 画像をコンテナ全体を埋めるように拡大縮小します。

.image {
        object-fit: fill;
      }

左の200px×200pxのサンプル画像を、350px×250pxのコンテナにobject-fit:fill;を適用したものが右の図です。

まとめ

object-fit:contain;、object-fit:cover;、object-fit:fill;の3パターンの比較を下に示します。
ぜひ違いを確認してみてください。

object-fitプロパティは、画像や動画を簡単に配置できる便利なプロパティです。
ぜひ色々な値を試してみてウェブサイトのデザインを向上させてください。