【CSS】img画像の表示位置をobject-positionで調整

imgタグの画像やvideoタグの動画を高さ指定すると、中央起点になるのがやっかいですよね…

今回、そんなお悩みを解決するのが「object-position」というCSSプロパティ。以下のように画面からはみ出た部分を画面中心に移動できます。

それでは、画像ファイルと動画ファイルをそれぞれ解説していきます。

img画像ファイルの表示位置を調整

See the Pen Untitled by D Hiyoshi (@D-Hiyoshi) on CodePen.

上記コード例では、object-positionプロパティを-48px centerとしています。これにより、画像は左端から48px左に移動および垂直方向に配置されます。

もし、画像を水平方向または垂直方向の特定の位置に配置したい場合は、object-positionプロパティの値を適宜変更します。例えば、画像を左から90%、垂直方向に10%の位置に配置するには、imgタグのobject-positionに次のような値を設定します。

img {
    object-position: 90% 10%; /* 画像を水平方向に15px、垂直方向に10%の位置に配置 */
  }

video動画タグの表示位置を調整

object-positionプロパティは画像だけでなく、<video>要素内の動画ファイルにも適用することができます。

See the Pen Untitled by D Hiyoshi (@D-Hiyoshi) on CodePen.

上記の例では、<video>要素を使用して動画ファイルを追加しています。画面幅599px以下でobject-positionプロパティを-80pxと設定することで、動画が左端から80px左側に移動されます。

動画のobject-positionを数値（ピクセルまたはパーセント）で指定することも可能です。必要に応じて値を調整し、動画を希望の位置に配置してください。

確認ポイント

初学者にとって、object-positionプロパティの数値って、ちょっと分かりづらいですよね…。なので、数値の件を含めて躓く可能性のあるポイントと解決方法を紹介します。

数値の指定方法

object-positionプロパティは、数値（ピクセルまたはパーセント）で位置を指定します。

• パーセント指定(%)
  コンテナの幅や高さに対する相対的な位置を指定するため、0%は一番左上、50%は中央、100%は一番右下を表します。
• ピクセル指定(px)
  コンテナ内の絶対的な位置を指定するため、コンテナの上端左端を0pxとして距離をピクセル指定します。
• まずは実践してみる！
  ブラウザの開発者ツール（検証）を使用して、リアルタイムで表示を確認しながら調整することで、直接見て覚えるのが使いこなすための早道です。

オーバーフロー

imgタグを囲っているコンテナ（今回はl-wrap）にobject-positionプロパティを適用すると、画像や動画がコンテナからはみ出る場合があります。

• overflowプロパティ
  コンテナに対してCSSのoverflowプロパティを適用し、はみ出した部分を非表示にするか、スクロール可能にすることができます。（overflow: hidden;ではみ出た部分を切り詰めることが多いです）
• コンテナの制約
  コンテナのサイズを適切に指定し、object-fitプロパティと組み合わせて画像や動画をコンテナ内にフィットさせるようにします。

コンテナのサイズ

object-positionプロパティを効果的に使用するためには、適切なコンテナのサイズを設定する必要があります。

• 幅と高さの指定
  CSSのwidthとheightプロパティを使用して、コンテナの幅と高さを指定します。これにより、コンテナのサイズを明確に設定することができます。
• リキッドデザイン
  コンテナの幅と高さをパーセントで指定することで、レスポンシブなリキッドデザインを実現できます。ウィンドウのサイズに応じてコンテナが自動的に調整されるため、画像の配置も適切に反映されます。

まとめ

画像や動画の幅・位置調整にはobject-fitとobject-positionが役立ちます。（object-fitについては別記事で紹介します）。ちなみに、object-fitはコンテナに合わせて画像を調整し、containやcoverなどの値を指定。一方、object-positionは画像をコンテナ内で位置指定し、centerや数値で調整します。

object-positionにより、メインビジュアルの画像・動画をスマホ画面で表示した時の違和感をなくせる一つの方法として、ストックしておいてください♪