画像
object-position
object-position は、img や video の中身を要素の枠のどこに置くかを指定します。書き方は background-position と同じです。
構文
<position>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
object-fit: none;
object-position: 25% 75%;
}コントロール
四角の中をクリック・ドラッグして中心を動かせます
横の位置
縦の位置
解説
パーセントは「同じ点」を合わせる
% は、画像の X% の点を、枠の X% の点に合わせるという意味です。0% で左端どうし、100% で右端どうしがそろいます。長さは、画像の左上の角を枠の左上からずらす量です。
動いて見えるのは余白か、はみ出しがあるときだけ
初期値の object-fit: fill では画像が枠いっぱいに伸びるので、位置を変えても見た目は変わりません。contain や none で余白があるときは画像の置き場所が、cover ではみ出しがあるときは切り取られる部分が変わります。このページのプレビューでは object-fit: none を付けて、元の大きさで置いています。
初期値は中央
初期値は 50% 50%（中央）です。background-position の初期値（0% 0%、左上）とは違うので注意しましょう。