---
id: css-rwd-images
title: "CSS RWD Images"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["responsive images", "max-width images", "background-size", "RWD images", "picture element"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "responsive", "images"]
raw_sources: ["https://www.w3schools.com/css/css_rwd_images.asp"]
applied_in: []
github_commit: ""
---

# [[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]
```css
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]
```css
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]
```css
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]
```css
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]
```css
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]
```css
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]
```css
/* 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]
```html
<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):
```css
img {
  max-width: 100%;
  height: auto;
}
```
Device-conditional background image (language: CSS):
```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).
