Images and Typography That Scale Without Breaking

A 1600px PNG in a 320px column will either overflow or squash if you set both width and height as fixed pixels. Text that is 12px on a phone and 12px on a desktop fails different people for different reasons. Scale media and type on purpose.

Fluid images without a pancake

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

max-width: 100% keeps the image inside its column. height: auto preserves aspect ratio when the width shrinks. Setting only width: 100% and a fixed height is how faces stretch.

<img
  src="product.jpg"
  alt="Blue ceramic mug on a wooden table"
  width="800"
  height="600"
>

Width and height attributes reserve space and reduce layout shift. CSS still lets the image shrink.

.thumb {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
}

aspect-ratio holds the box shape before the file loads. object-fit: cover crops instead of stretching when the box and file disagree.

Fluid type without gimmicks

html { font-size: 100%; } /* respect user default */

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #080b0e;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

rem follows the root font size, so user zoom and browser defaults still matter. clamp(min, preferred, max) caps how small and how large a heading gets. You do not need a media query for every heading size.

Line length

On a wide monitor, a full-bleed paragraph becomes unreadably long. Cap the measure:

.prose {
  max-width: 40rem;
}

About 45–75 characters per line is a useful target. Exact counts vary by font.

Common mistakes

• Fixed width and height in CSS that disagree with the file. Distortion.
• font-size only in px everywhere. Ignores user default font size.
• Forgetting sizes when you add srcset. The browser may download a huge file on a phone. (Advanced covers srcset in depth; here, fluid CSS is the floor.)

A content column that respects both

.prose {
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.prose img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
}

Text measure stays readable. Images shrink with the column. You do not need a different font size per phone brand.

When the image is decorative

<img src="divider.svg" alt="" role="presentation">

Empty alt tells assistive tech to skip it. Do not put “decorative blue line” in alt. Do not leave alt missing on a product photo.

Prefer modern formats when you can

Serving a large uncompressed PNG for a hero photo wastes bandwidth on phones. Prefer compressed JPEG/WebP/AVIF when your pipeline supports them. The layout rules above still apply regardless of format.

What happens if you skip this

Phones will scroll sideways on product pages. Headings will either overflow or look timid. People will blame "the mobile site".

Try it

Drop a large photo into a narrow column with max-width: 100%; height: auto. Then force a bad version with width: 100%; height: 200px and compare. Which one still looks like the product?

If the image looks right only on your laptop, who is the page for?