RWD Images

RWD Images

Responsive images must scale inside their containers and avoid overflow.

Basic Responsive Image

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

Responsive Thumbnails (object-fit)

.thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

Summary

• Use max-width: 100% + height: auto for most images.
• Use object-fit: cover for fixed-size thumbnails and card images.
• Always ensure images cannot overflow their container.