前回は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 など
設定値だけ見てもイメージが湧きにくいと思いますので、
次は実際にコードを記述して、結果を見てみましょう。
サンプル
それでは実際にソースコードを記述して配置を見てみましょう。
使用する画像はこちらです。
<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」について以下の記事で紹介していますので、宜しければご覧ください♪
