CSS Max-width

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will change the height of the element. If the content is smaller than the maximum width, the max-width property has no effect.

Example 1: Using max-width

This <div> element has a height of 100px and a max-width of 500px.

Resize the browser window to see the effect.

Example 2: The Problem with Width

The problem with the width property occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.

This div has a fixed width of 500px. Resize the browser window to see the scrollbar.

Example 3: Responsive Images

max-width is often used with images to make them responsive.

Example

div {
  max-width: 500px;
  margin: auto;
}

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