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

【CSS】object-fitの使い方【img要素の縦横比固定方法】

CSSに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定サイズで画像を配置する方法を紹介します。他にも「object-fit」プロパティにてどのように配置するか設定することも可能。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.24

今回は置換要素に対して、コンテンツをどこに配置するかを設定する「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 など

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

サンプル

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

<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;
}

結果がこちらです。

右中央に表示

中央下に表示

左上に表示

パーセント表記で設定（80%、20%）

パーセント表記で設定（右から80%、下から20%）

ピクセルで設定（50px、180px）

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

まとめ

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

ただし、「object-fit」プロパティと同様IEにはどのバージョンでも現時点（2020年5月）では対応できていませんので、別途IE対応が必要なのは一緒ですね。
IE対応する方法として「object-fit-images」について以下の記事で紹介していますので、宜しければご覧ください♪

【CSS】object-fit,object-positionのIE対応【object-fit-images】

CSSのobject-fit、object-positionプロパティはIEに対応していません。なので、object-fit-imagesを使用して、IEに対応させる方法を紹介します！　object-fit、object-positionの使い方については前記事で触れていますので、良かったら一緒にどうぞ♪

nyanblog2222.com

2020.05.27

投稿 【CSS】object-positionの使い方【img要素の画像配置設定】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。