同じ枠でも、画像の見え方は変わる

400 × 200の自作画像を、240 × 240の内容領域へ配置しています。円の形と左右の文字を比べてください。

左右の文字と中央の円
fill:円が縦長になります。
左右の文字と中央の円
contain:全体が収まり、余白ができます。
左右が切り取られた図
cover:枠を埋め、左右が切り取られます。

基準位置:50% 50%

object-positionは枠内の画像の位置を変えます。枠自体の寸法は変わりません。

MDNの解説 · 自作SVG・HTML・CSS・JavaScript:CC0。実験のZIPを保存