画像や動画などの置換要素がコンテナにどのようにフィットするかを制御するプロパティです。contain、cover、fill、none、scale-downの値があり、アスペクト比を維持した表示が可能です。
object-fit: fill | contain | cover | none | scale-down| object-cover | object-fit: cover |
| object-contain | object-fit: contain |
| object-fill | object-fit: fill |
| object-scale-down | object-fit: scale-down |
object-fit: cover;アスペクト比を保ちながらコンテナを埋める
object-fit: contain;アスペクト比を保ちながらコンテナに収める
object-fit: fill;アスペクト比を無視してコンテナに合わせる（歪む可能性あり）
object-fit: none;元のサイズのまま表示（はみ出し部分はカット）
object-fit: scale-down;containとnoneのうち、結果的に小さくなる方を適用
レスポンシブ画像の必須プロパティ。aspect-ratioと組み合わせると強力。
coverとcontainの取り違えがAIにも頻発します（cover=領域を埋めて見切れる、contain=全体が見えて余白が出る）。またobject-fitはimg/video自身に指定するもので、親要素に書いても効きません。img側にwidth/height（またはaspect-ratio）でボックスサイズを与えないと効果が見えない点も生成コードの定番ミスです。
サムネイル一覧で画像の縦横比がバラバラでも揃って見えるように、object-fit: coverとaspect-ratioで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。