2nd/10_Wiki/Topic_CSS/CSS_Object_Fit.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

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

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]

.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]

.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]

.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]

.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]

.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):

.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).