A field report with flexible media

Goal

Style .field-report__image so it shrinks to fit its container without stretching or distorting, and give .field-report__title a fluid font size that scales with the viewport but stays within fixed limits.

Example

A plain width: 100% forces an image to always fill its container — including growing past its own real size on a wide screen, which blurs it:

.bad-image {
  width: 100%;
  /* stretches to fill any container, even wider than the image really is */
}

max-width: 100% with height: auto only shrinks the image when its container is narrower than it is, and never grows it, while keeping its proportions:

.good-image {
  max-width: 100%;
  height: auto;
}

The same shrink-but-never-grow idea applies to text with clamp():

.fluid-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  /* never smaller than 1.75rem, never larger than 3rem, and scales
     between them as the viewport width changes */
}

Rules

• Edit only styles.css. index.html is already correct and must not change — it has one <img class="field-report__image"> with alt, width, height, srcset and sizes already set, and one <h1 class="field-report__title">.
• .field-report__image needs max-width: 100% and height: auto — not width: 100%, which would force the image to always fill its container and can stretch it past its own real size.
• .field-report__title needs font-size: clamp(min, preferred, max), where min and max are rem values and the preferred value includes a vw unit so the size actually changes with the viewport width, instead of jumping straight from min to max.
• Don't use flexbox, grid, media queries or container queries — this lesson is only about the box model's interaction with images, and about clamp().

What you'll practice

Making an image responsive with max-width/height: auto instead of a plain width: 100%, and writing a clamp() font size that's genuinely fluid between a floor and a ceiling.

Run it

gonomicon fetch fs-week-1/06-05-field-report-responsive-media
cd 06-05-field-report-responsive-media
gonomicon test
gonomicon submit

Hints

1. Give .field-report__image max-width: 100% and height: auto instead of width: 100% — that lets it shrink to fit a narrow container without ever stretching past its own size or losing its proportions.
2. .field-report__title's font-size needs clamp(min, preferred, max), where the preferred value includes a vw unit so it actually scales with the viewport — a fixed rem or px value in the middle isn't fluid.
3. .field-report__image { max-width: 100%; height: auto; } .field-report__title { font-size: clamp(1.75rem, 4vw, 3rem); } — nothing else needs to change.