Retour au cours

Lesson 86: Fluid Images and max-width: 100%

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

86. Fluid Images and max-width: 100%

One of the most essential rules in responsive design is ensuring images and media do not break the layout by overflowing their containers.

The Problem

By default, an image will display at its intrinsic (original) pixel size. If the image is 1500px wide but its container is only 800px wide, the image will push outside the container, breaking the layout.

The Universal Fluid Image Solution

To make images fluid, you apply two simple rules:

  1. max-width: 100%: This ensures the image will never be wider than its parent container. If the parent shrinks, the image shrinks proportionally.
  2. height: auto: This maintains the image's aspect ratio. If the image width changes, the height adjusts automatically to prevent distortion.

css /* Apply this globally to all images and media / img, picture, video, canvas, svg { max-width: 100%; height: auto; display: block; / Helps remove tiny bottom space browsers often add */ }

Note: While max-width: 100% ensures the image scales down, it will not scale up beyond its original pixel size (unless the image already has intrinsic dimensions smaller than the container), which generally prevents blurring due to excessive stretching.