# Responsive Images — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

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

> Make images scale with max-width and height auto, and crop them cleanly with object-fit.

## 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.