HTML/CSS
アイキャッチ 猫

前回はCSSで「object-fit」プロパティを使って、img要素などの置換要素に対してコンテンツをどのようにはめ込むかを設定しました。
よければこちらの記事もご覧になってください。

今回は置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介していきたいと思います。

object-positionプロパティ

このプロパティは「iframe」「video」「img」など要素の中身(コンテンツ)を要素のどこに配置するか設定します。

先ほども説明あったようにコンテンツをどのようにはめ込むかは「object-fit」プロパティを設定します。

値の設定について

値はこのように設定することができます。
object-fit: [左右] [上下]
初期値は真ん中の“50% 50%”が設定されています。

[左右]left、right、center
   もしくは left、right + 数値(単位付)
   もしくは 数値(単位付)のみ
[上下]top、bottom、center
   もしくは top、bottom + 数値(単位付)
   もしくは 数値(単位付)のみ

※ デフォルトで50%がそれぞれ設定されているので、片方省略も可能
例:object-fit: right もしくは、object-fit: bottom など

設定値だけ見てもイメージが湧きにくいと思いますので、
次は実際にコードを記述して、結果を見てみましょう。

サンプル

それでは実際にソースコードを記述して配置を見てみましょう。
使用する画像はこちらです。

object-position サンプル画像
<p>右中央に表示</p>
<img src="img/01.jpg" class="right-center sample">

<p>中央下に表示</p>
<img src="img/01.jpg" class="center-bottom sample">

<p>左上に表示</p>
<img src="img/01.jpg" class="left-top sample">

<p>パーセント表記で設定(80%、20%)</p>
<img src="img/01.jpg" class="set-percentage1 sample">

<p>パーセント表記で設定(右から80%、下から20%)</p>
<img src="img/01.jpg" class="set-percentage2 sample">

<p>ピクセルで設定(50px、180px)</p>
<img src="img/01.jpg" class="set-pixel sample">
img{
    width: 400px;
    height: 300px;

    // imgのサイズを分かりやすくするため、background-color、
    // borderを設定し、object-fitはnoneを設定しています。
    background-color: #999;
    border: 1px solid #666;
    object-fit: none;
}

// 右中央
.right-center{
    object-position: right;
}

// 中央下
.center-bottom{
    object-position: bottom;
}

// 左上
.left-top{
    object-position: left top;
}

// パーセントで値を設定(80%, 20%)
.set-percentage1{
    object-position: 80% 20%;
}

// パーセントで値を設定(右から80%、下から20%)
.set-percentage2{
    object-position: right 80% bottom 20%;
}

// ピクセルで値を設定(50px, 180px)
.set-pixel{
    object-position: 50px 180px;
}

結果がこちらです。

右中央に表示
object-position確認 右、中央

中央下に表示
object-position確認 中央、下

左上に表示
object-position確認 左、上

パーセント表記で設定(80%、20%)
object-position確認 パーセント設定

パーセント表記で設定(右から80%、下から20%)
object-position確認 パーセント設定

ピクセルで設定(50px、180px)
object-position確認 ピクセル設定

最後の結果についてですが、img要素からはみ出ている部分は出力されていないことが分かります。
つまりimg要素の中で画像を配置しているので、img要素からはみ出ている赤枠部分は表示されず、トリミングされています。

トリミングされている箇所

まとめ

今回は「object-position」プロパティをご紹介しました。
前回紹介した「object-fit」プロパティと合わせて使いこなしていきたいですね!

ただし、「object-fit」プロパティと同様IEにはどのバージョンでも現時点(2020年5月)では対応できていませんので、別途IE対応が必要なのは一緒ですね。

次回はIE対応ができる「object-fit-images」について、紹介していきたいと思います。