2nd/10_Wiki/Topic_CSS/CSS_Object_Fit.md

---
id: css-object-fit
title: "CSS object-fit"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["object-fit", "object-fit cover", "object-fit contain", "image resizing", "aspect ratio fit"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "object-fit", "images", "video"]
raw_sources: ["https://www.w3schools.com/css/css3_object-fit.asp"]
applied_in: []
github_commit: ""
---

# [[CSS object-fit]]

## 🎯 한 줄 통찰 (One-line insight)
The CSS `object-fit` property specifies how an `<img>` or `<video>` should be resized to fit its container — letting you preserve or override aspect ratio. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Purpose** — `object-fit` specifies how an `<img>` or `<video>` should be resized to fit its container. [S1]
- **Five values** — `fill`, `cover`, `contain`, `none`, `scale-down`. [S1]
- **Aspect ratio control** — the chosen value determines whether the media keeps its aspect ratio, gets stretched, or gets cropped. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Fixed container + fill the box** — give the container a fixed width/height, set the image to `width: 100%; height: 100%;`, then pick an `object-fit` value to decide how the image fills that box. [S1]
- **Crop-to-fill** — use `object-fit: cover;` to preserve aspect ratio and fill the container, cropping overflow. [S1]

## 📖 세부 내용 (Details)
**What it does** — The CSS `object-fit` property is used to specify how an `<img>` or `<video>` should be resized to fit its container. [S1]

**The five values** [S1]
- **fill** — Does not preserve the aspect ratio. The image is resized to fill the container (the image will be stretched or squeezed to fit). This is the default behavior described by the tutorial. [S1]
- **cover** — Preserves the aspect ratio, and the image fills the container. Cuts overflowing content if needed. [S1]
- **contain** — Preserves the aspect ratio, and fits the image inside the container, without cutting — leaves empty space if needed. [S1]
- **none** — The image is not resized. [S1]
- **scale-down** — The image is scaled down to the smallest version of `none` or `contain`. [S1]

**Example: `object-fit: fill`** [S1]
```css
.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
```

**Example: `object-fit: cover`** — preserves aspect ratio when filling the box; the tutorial notes this keeps proportions intact even when the browser window is resized. [S1]
```css
.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

**Example: `object-fit: contain`** [S1]
```css
.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
```

**Example: `object-fit: none`** [S1]
```css
.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: none;
}
```

**Example: `object-fit: scale-down`** [S1]
```css
.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
```

**Related properties** [S1]

| Property | Description |
|---|---|
| `object-fit` | Specifies how an `<img>` or `<video>` should be resized to fit its container |
| `object-position` | Specifies how an `<img>` or `<video>` should be positioned with x/y coordinates inside its "own content box" |

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`fill`** — when you do not care about distortion and just need the box fully covered (aspect ratio is destroyed). [S1]
- **`cover`** — when you need the box fully covered and want to keep proportions; accept that overflow is cropped. [S1]
- **`contain`** — when the entire image must remain visible without cropping; accept empty space (letterboxing). [S1]
- **`none`** — when the image must keep its intrinsic size and must not be resized. [S1]
- **`scale-down`** — when you want the smaller result of `none` vs `contain` (i.e. only shrink, never enlarge). [S1]

## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: a 200×300 fixed container with each `object-fit` value applied to a full-size image. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Fill a fixed container while preserving aspect ratio (language: CSS):
```css
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Object Position]], [[CSS Image Shapes]], [[CSS Images]]
- **참조 맥락:** Referenced when fitting images or video into fixed-size containers without distortion.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS object-fit — https://www.w3schools.com/css/css3_object-fit.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS object-fit" page (Astra wiki-curation, P-Reinforce v3.1 format).