開発 2024.03.08

CSS object-fitと組み合わせて活用したい、object-positionの使い方！

前回の記事では、object-fitプロパティを使って、画像や動画をどのようにコンテナに収めるかを説明しました。
今回は、object-positionプロパティを使って、画像や動画をコンテナ内のどの位置に配置するかを説明します。

1 object-positionプロパティの値
2 具体的な使い方
3 表示位置を指定する方法
4 object-fitと組み合わせた使い方
5 まとめ

object-positionプロパティの値

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

top left: 画像の左上をコンテナの左上に配置します。
top center: 画像の真ん中をコンテナの左上に配置します
top right: 画像の右上をコンテナの右上に配置します
center left: 画像の左上をコンテナの真ん中に配置します。
center center: 画像の真ん中をコンテナの真ん中に配置します。
center right: 画像の右上をコンテナの真ん中に配置します。
bottom left: 画像の左上をコンテナの左下に配置します。
bottom center: 画像の真ん中をコンテナの左下に配置します。
bottom right: 画像の右上をコンテナの右下に配置します。

この他にもpx単位での指定、%での指定も可能です。

具体的な使い方

object-positionプロパティの使い方は、object-fitプロパティと一緒に使います。
以下のコードのように、画像要素のスタイルにobject-positionプロパティを指定するだけです。
今回はまず、object-fit:none;を指定した画像で、表示位置の変化を見てみましょう。

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

左の350px×250pxのコンテナに入った200px×200pxのサンプル画像に対して、object-fit:none;object-position:bottom right;を適用したものが右の図です。

表示位置を指定する方法

object-positionプロパティを使って、画像を様々な位置に配置してみましょう。

.image-container {
        width: 350px;
        height: 250px;
      }

      /* コンテナの中央に配置 */
      .image {
        width:100%;
        height:100%;
        object-fit: none;
        object-position: center center;
      }

      /* コンテナの左下に配置 */
      .image {
        width:100%;
        height:100%;
        object-fit: none;
        object-position: left center;
      }

      /* 画像の位置をpxで指定 */
      .image {
        width:100%;
        height:100%;
        object-fit: none;
        object-position: 25px 50px;
      }    

      /* 画像の位置を%で指定 */
      .image {
        width:100%;
        height:100%;
        object-fit: none;
        object-position: 125% 150%;
      }

center center: 画像をコンテナの中央に配置

left bottom: 画像をコンテナの左下に配置

pxで指定: 画像の位置をpxで指定

%で指定: 画像の位置を%で指定

object-fitと組み合わせた使い方

object-fitとobject-positionプロパティを組み合わせることで、画像の表示方法を様々に調整することができます。

.image-container {
      width: 350px;
      height: 250px;
    }

    /* object-fit:contain;、＋ コンテナの中央に配置 */
    .image {
      width:100%;
      height:100%;
      object-fit: contain;
      object-position: center center;
    }

    /* object-fit:cover; ＋ コンテナの左下に配置 */
    .image {
      width:100%;
      height:100%;
      object-fit: cover;
      object-position: left center;
    }

    /* object-fit:contain; ＋ 画像の位置をpxで指定 */
    .image {
      width:100%;
      height:100%;
      object-fit: contain;
      object-position: 25px 50px;
    }    

    /* object-fit:cover; ＋ 画像の位置を%で指定 */
    .image {
      width:100%;
      height:100%;
      object-fit: cover;
      object-position: 125% 150%;
    }

object-fit:contain; ＋ object-position:center;

object-fit:cover; ＋ object-position:left bottom;

object-fit:contain; ＋ object-position:25px 50px;

object-fit:cover; ＋ object-position:125% 150%;

まとめ

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

インターン実習生

こんにちは！合同会社グローワークスのインターン生です。ITとデザインが大好きで、皆さんと一緒に創造的なプロジェクトを進めていくことにワクワクしています！

View All