# Responsive Images — CSS

Source: https://www.geekswithgeeks.com/en/css/css-responsive-images

> Images that scale gracefully instead of overflowing their container.

## The one-line fix

`max-width: 100%` stops an image from overflowing its parent, while `height: auto` keeps its aspect ratio intact as it shrinks.

## A universal image rule

Many projects add this globally, near the CSS reset.

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

## object-fit for cropping

When an `<img>` has a fixed width/height, `object-fit: cover` crops it to fill the box without stretching — like `background-size: cover` but for `<img>` tags.