【CSS】object-fitによって表示のズレた画像を調整する方法

object-fit で画像がずれる

object-fit: cover;は、CSSで設定したサイズに合わせて画像や動画を表示するために頻繁に使用されるプロパティです。

これは、コンテンツの一部が切り取られる仕組みのため、

• 表示させたい部分ではなく、他の部分が表示される

といった問題が発生します。

このような問題に対応するために、object-positionプロパティが存在します。

このプロパティでは、切り取られる部分の位置を調整することができ、表示させたい部分を表示させることができます。

object-position で画像の位置調整を行う

object-position プロパティは、ボックス内における画像や動画の配置を指定できます。

このプロパティでは、以下の設定方法が可能です。

• percentage値：%
• キーワード：top, bottom, right, left, center
• length値：px, em など
• オフセット値：bottom 20px のように設定する方法

※ プロパティの初期値は 50% 50% です。

ベースとなるCSS

img {
	width: ; // 画像の横幅
	height: ; // 画像の高さ
	object-fit: cover;
	object-position: ; // 値を入れる
}

% での位置調整

% 指定では、左端から 何%、上端から 何% と調整できます。

%は画像のサイズを基準に求められます。

値は １つ または ２つ 設定でき、１つ目は「左右方向」２つ目は「上下方向」の位置を設定します。

// 左端から30%、上端から50%
object-position: 30% 50%;

キーワードでの位置調整

キーワード指定では、上、下、左、右 のどれに寄せるかを調整できます。

// 画像を左端に寄せる
object-position: left;

// 画像を右端に寄せる
object-position: right;

px での位置調整

px などの絶対長の単位では、

• 左端から 何px、上端から 何px の位置から画像が表示される

という設定になっています。

そのため、object-fit: cover; の時は通常、使用しません

object-position: 10px 20px;

オフセット値での位置調整

キーワード、数値を組み合わせて位置調整する方法です。

• 「キーワード」の「何px」から画像を表示する

と設定します。

object-position: bottom 10px right 20px;

結論

object-fit: cover; で画像のサイズを整えた際に、表示位置を調整したい場合は、

object-position で簡単に調整できます。