2nd/10_Wiki/Topic_CSS/CSS_RWD_Images.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-rwd-images	CSS RWD Images	Frontend	draft	conceptual		responsive images max-width images background-size RWD images picture element		B	0.89	2026-06-23	2026-06-23			css web frontend w3schools responsive images	https://www.w3schools.com/css/css_rwd_images.asp

CSS RWD Images

🎯 한 줄 통찰 (One-line insight)

Responsive images scale with their container — max-width: 100% with height: auto scales down without upscaling, while background-size (contain / cover / explicit) and media queries or the <picture> element serve appropriately sized images per device. [S1]

🧠 핵심 개념 (Core concepts)

• width: 100% — scales the image up and down with the container, but can scale beyond the image's original size. [S1]
• max-width: 100% — scales the image down if needed but never up beyond its original size; a better solution in many cases. [S1]
• background-size: contain — scales the background image to fit the content area while keeping aspect ratio. [S1]
• background-size: 100% 100% — stretches the background image to cover the entire content area. [S1]
• background-size: cover — scales the image to cover the entire area while keeping aspect ratio; parts may be clipped. [S1]
• Different images for different devices — media queries can serve a different image per viewport width to avoid loading large files on small devices. [S1]
• <picture> element — lets the browser choose among multiple sources via srcset and media attributes. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Fluid image — img { max-width: 100%; height: auto; } is the safe default for responsive images. [S1]
• Art direction / file savings — swap images by viewport using media queries or <picture> to deliver the right image to each device. [S1]

📖 세부 내용 (Details)

Using The width Property — If the width property is set to 100%, the image will be responsive and scale up and down: [S1]

img {
  width: 100%;
  height: auto;
}

Notice that in the example above the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead. [S1]

Using The max-width Property — If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size: [S1]

img {
  max-width: 100%;
  height: auto;
}

Add an Image to The Example Web Page — Add an image to the example web page we used in the previous chapter, and make it responsive: [S1]

img {
  width: 100%;
  height: auto;
}

Background Images — Background images can also respond to resizing and scaling. Three different methods are shown. [S1]

background-size: contain — the background image will scale, and try to fit the content area, but keep its aspect ratio: [S1]

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid black;
}

background-size: 100% 100% — if the property is set to "100% 100%", the background image will stretch to cover the entire content area: [S1]

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid black;
}

background-size: cover — keeps the aspect ratio and covers the entire content area; some parts of the background image may be clipped: [S1]

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid black;
}

Different Images for Different Devices — A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices: [S1]

/* For width smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

The HTML <picture> Element — The HTML <picture> element gives web developers more flexibility in specifying image resources. The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport: [S1]

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Responsive Image Gallery — The page also presents a responsive image gallery section, but its Example contains only a "Try it Yourself" link with no inline CSS code — Not found in source. [S1]

Note: This page does not contain an image-set() / HiDPI section — confirmed not present in source. [S1]

🛠️ 적용 사례 (Applied in summary)

The "Add an Image to The Example Web Page" example applies img { width: 100%; height: auto; } to the example page from the previous chapter, and the device-specific examples swap img_smallflower.jpg / img_flowers.jpg by viewport. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Fluid image, no upscaling (language: CSS):

img {
  max-width: 100%;
  height: auto;
}

Device-conditional background image (language: CSS):

body {
  background-image: url('img_smallflower.jpg');
}
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• width: 100% vs max-width: 100% — width: 100% scales the image up and down (can exceed original size); max-width: 100% scales down only and never beyond the original size — described as a better solution in many cases. [S1]
• contain vs 100% 100% vs cover — contain fits inside the area preserving aspect ratio; 100% 100% stretches to fill (distorting aspect ratio); cover fills the area preserving aspect ratio but may clip. [S1]
• Media-query swap vs <picture> — both serve different images per device; <picture> keeps the choice in markup with srcset/media, while CSS media queries swap background images in the stylesheet. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS RWD Videos, CSS RWD Media Queries, CSS RWD Viewport
• 참조 맥락: How media in a responsive layout scales and is selectively delivered per device.

📚 출처 (Sources)

• [S1] W3Schools — CSS RWD Images — https://www.w3schools.com/css/css_rwd_images.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS RWD Images" page (Astra wiki-curation, P-Reinforce v3.1 format).