Max-width

You will use CSS max-width to keep elements from growing beyond a chosen size, especially images and text containers, so layouts stay readable and responsive.

What it is

max-width is a CSS property that sets the largest width an element may use. If the element’s normal width would be larger than this limit, the browser applies the limit instead. If the element is already smaller, max-width does not stretch it. For a responsive image, max-width: 100% means the image cannot become wider than its containing block. Adding height: auto lets the browser preserve the image’s aspect ratio. Related terms include width, min-width, max-inline-size, box-sizing, and containing block.

Why it matters

• It prevents large images from forcing horizontal scrolling on small screens.
• It keeps text columns readable by limiting line length.
• It lets components shrink naturally without fixed pixel widths.
• It supports fluid layouts, cards, media, and responsive typography.
• It reduces layout surprises when content size changes.

Syntax or steps

The smallest useful pattern is:

selector {
  max-width: value;
}

The value can be a length such as 600px, a percentage such as 100%, or a unit such as ch, rem, or vw. For images, the classic trick is:

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

For a centered reading column, combine max-width with centering:

.container {
  max-width: 60ch;
  margin-inline: auto;
  padding-inline: 1rem;
}

Example

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

.container {
  max-width: 60ch;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* HTML */
<div class="container">
  <img src="photo.jpg" alt="A photo">
  <p>This paragraph stays readable because the container cannot grow past 60ch.</p>
</div>

Part by part: img { max-width: 100%; } stops the image from exceeding its parent’s width. height: auto scales the height proportionally. .container { max-width: 60ch; } limits the text column to about 60 characters wide. margin-inline: auto centers the container when there is extra horizontal space. padding-inline: 1rem keeps text from touching the edges.

Common mistakes

• Using width: 100% on images. This can stretch small images. Use max-width: 100% so images only grow up to their natural size.
• Forgetting height: auto. If height is fixed, a constrained width can distort the image. Use height: auto for proportional scaling.
• Assuming 100% means the viewport. It usually means the containing block. If the parent is narrow, the image is limited by the parent, not the browser window.
• Ignoring box-sizing. Padding and borders can make an element wider than expected. Add box-sizing: border-box when sizing containers.

When to use it

Use max-width when you want an element to be flexible but capped. Compare it with nearby properties:

For most responsive media, max-width is safer than width. For precise UI boxes, width may be better.

Practice

Guided exercise: Make images responsive and center a paragraph column at 65 characters. Expected result: images shrink on narrow screens, and the paragraph does not become too wide.

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

p {
  max-width: 65ch;
  margin-inline: auto;
}

Challenge: Create a card that fills available space but never exceeds 400 pixels. Hint: use max-width: 400px with width: 100% and box-sizing: border-box.

Quick check

Question: If an image has max-width: 100% and its parent is 300 pixels wide, what happens to a 1000-pixel-wide image?

Answer: The image is limited to 300 pixels wide. With height: auto, its height scales proportionally.

Summary

max-width is a guardrail for layout. It lets elements shrink when needed but prevents them from becoming too wide. The classic image rule, max-width: 100% with height: auto, is a simple way to make media responsive without stretching small images.