画像のトリミング（object-fit）
object-fitobject-position
img・video・iframe などの置換要素（replaced element）がコンテナにどう収まるかを制御するプロパティです。
デモ：object-fit の各値（固定サイズのコンテナ内）
fill
引き伸ばす（デフォルト）
contain
縦横比維持・全体表示
cover
縦横比維持・全体を覆う
none
元サイズで表示
scale-down
none/containの小さい方
※ 実際の使用では img タグに適用します。上記はdivで概念を示したデモです。
実用デモ：カードの画像サムネイル
デモ：object-position（cover時のフォーカス点）
top
center（デフォルト）
bottom
コード例
/* 固定サイズのカード画像（縦横比を維持してトリミング） */
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center; /* フォーカス点 */
}
/* アバター画像（正方形コンテナに円形表示） */
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
object-position: top; /* 顔が上にある場合 */
}
/* ロゴ画像（余白を出して全体表示） */
.logo {
width: 200px;
height: 80px;
object-fit: contain;
object-position: left center;
}
/* position: absolute と組み合わせた全画面カバー */
.full-cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}比較：object-fit vs background-size（cover/contain）
| 観点 | object-fit: cover | background-size: cover |
|---|---|---|
| 対象要素 | img / video / iframe など（置換要素） | 任意の要素の背景 |
| SEO・アクセシビリティ | ✅ alt属性、スクリーンリーダー対応 | ❌ 装飾扱い（意味を持たない） |
| 遅延読み込み | ✅ loading="lazy" が使える | ❌ CSSなので直接制御しにくい |
| 位置調整 | object-position プロパティ | background-position プロパティ |
| 推奨用途 | コンテンツ画像（写真・ロゴなど） | 装飾的な背景パターン・ヒーロー画像 |
🤖 AIプロンプトテンプレート
CSSのobject-fit / object-positionプロパティを使った画像表示デモをReact + Tailwind CSSで作成してください。 要件: - fill / contain / cover / none / scale-down の5つの値を並べて視覚的に比較するデモ - object-positionのtop / center / bottom / leftなどの位置指定の違いを確認できるインタラクティブUI - カードコンポーネントにおける固定サイズサムネイル（object-fit: cover）の実装 - アバター画像（正方形コンテナ + border-radius: 50% + object-fit: cover）の実装 - ロゴ画像（object-fit: contain + object-position: left center）の実装 - background-size: cover との使い分けを説明する比較デモ
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。