Stop images from overflowing – CSS Practice Problem

Make a page ready for small screens.

What to build

A page with fluid images.

Requirements

The head includes the standard viewport tag.
img has max-width: 100% and height: auto.
.wrap has max-width: 500px, in place of its fixed width.

Constraints

Do not change the image's width attribute.

Example

See the first code block in the lesson.

Why it works

Images stop at the width of their parent and shrink in proportion, and the wrapper can get narrower when the screen does.

Hints

Hint 1

max-width limits the width, and height auto keeps the shape.

Hint 2

The viewport tag goes in the head.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fluid</title>
  <style>
    .wrap { max-width: 500px; }
    img { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="wrap">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'/%3E" alt="A wide banner" width="900" height="300">
  </div>
</body>
</html>

Lesson: Responsive design basics →