Lounge Chair
Comfortable seating for modern spaces.
```
This says: on small screens, the image is full width; otherwise, it is 600 pixels wide. The browser can then choose the most appropriate source from `srcset`.
### Using object-fit
When an image has a fixed box size, `object-fit` controls whether the image fills the box, stays fully visible, or stretches.
```css
img {
width: 100%;
height: 240px;
object-fit: cover;
}
```
Here the image fills a 240px-tall area and crops if needed, while keeping its aspect ratio.
## 4. Step-by-Step Examples
### Example 1: Width-based image selection
Use width descriptors when you have several file sizes of the same image. This is the most common responsive image pattern.
```html
```
The browser can now choose a file close to the image’s actual display width instead of always loading the largest version.
### Example 2: High-density displays
Some screens have more physical pixels than CSS pixels. You can provide 1x and 2x versions for sharper rendering.
```html
```
This pattern is useful for icons, logos, and small UI images where crisp edges matter.
### Example 3: Cropping a card image with object-fit
Sometimes images need to match a card or tile shape. `object-fit: cover` fills the area without distortion.
```css
.card__image {
width: 100%;
height: 180px;
object-fit: cover;
object-position: center;
}
```
This is common for blog thumbnails, product cards, and team profile photos.
### Example 4: Showing the full image inside a fixed box
If cropping would hide important content, use `contain` instead of `cover`.
```css
.logo {
width: 240px;
height: 120px;
object-fit: contain;
background: #f5f5f5;
}
```
This keeps the whole logo visible and adds empty space if the aspect ratios do not match.
## 5. Practical Use Cases
- Product galleries that need multiple file sizes for different screens.
- Hero banners where desktop and mobile layouts show the same image at different widths.
- Thumbnail grids where every image must fit a consistent card shape.
- Avatars and icons that need sharper 2x assets on retina displays.
- Editorial layouts where image width changes with the reading column.
## 6. Common Mistakes
### Mistake 1: Using srcset without sizes for width-based images
When you provide width descriptors in `srcset`, the browser also needs `sizes` to estimate the display width. Without it, the browser may choose a larger file than necessary.
**Problem:** The browser cannot accurately determine the image slot size, so it may download an inefficient asset or ignore your intent.
```html
```
**Fix:** Add a realistic `sizes` value that matches the layout.
```html
```
The corrected version gives the browser enough information to choose a better match.
### Mistake 2: Stretching images instead of fitting them
Setting both width and height without `object-fit` can distort the image.
**Problem:** The image is forced into a box with a different aspect ratio, so it appears squashed or stretched.
```css
img {
width: 320px;
height: 180px;
}
```
**Fix:** Add `object-fit` to preserve the aspect ratio.
```css
img {
width: 320px;
height: 180px;
object-fit: cover;
}
```
This works because the browser crops rather than distorts the image.
### Mistake 3: Expecting object-fit to change the image file size
`object-fit` changes presentation, not the downloaded file. It will not reduce bandwidth by itself.
**Problem:** The image still loads at its original file size, so performance does not improve unless you also serve appropriate source files.
```css
img {
width: 100%;
height: 300px;
object-fit: cover;
}
```
**Fix:** Combine `object-fit` with `srcset` and `sizes` so the browser can also choose a smaller asset.
```html
```
This version improves both layout behavior and asset selection.
## 7. Best Practices
### Practice 1: Match sizes to the real layout
The `sizes` attribute should describe how wide the image actually renders, not how wide you wish it were. This helps the browser choose the right candidate.
```html
```
Accurate sizes reduce unnecessary downloads and make image selection more predictable.
### Practice 2: Use cover for visual crops, contain for logos
`cover` is ideal when the image is decorative or the crop is acceptable. `contain` is better when the full image must stay visible.
```css
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
}
.brand-logo {
width: 160px;
height: 80px;
object-fit: contain;
}
```
Choosing the right fit value prevents awkward crops and preserves intent.
### Practice 3: Always set alt text thoughtfully
Responsive images still need meaningful `alt` text. The image source may change, but the accessibility purpose remains the same.
```html
```
Good alt text makes responsive images more usable for everyone.
## 8. Limitations and Edge Cases
- `object-fit` does not work on background images; it applies to replaced elements like `img` and `video`.
- `srcset` and `sizes` affect which file is chosen, but they do not control cropping or aspect ratio.
- Some developers expect `sizes` to be visual CSS; it is not. It is a hint for source selection.
- If the layout changes after the page loads due to fonts, containers, or scripts, the browser may have already chosen an image before the final layout is stable.
- For art direction, where different crops are needed, you usually need `picture` with media queries rather than only `srcset`.
- `object-fit: cover` can crop important content, so it is a poor choice for product photos where every detail matters.
## 9. Practical Mini Project
Here is a small card layout that uses all three ideas together: responsive source selection, predictable image sizing, and clean cropping.
```html
Comfortable seating for modern spaces.
