Problem description

You are given an HTML container element that holds images of varying sizes. Write CSS rules to ensure each image scales responsively: it should shrink to fit the container’s width if necessary, but never exceed its original intrinsic size, while maintaining its aspect ratio.

Goal

Implement CSS in styles.css so that images within the container adapt to the container width, preserving their aspect ratio and preventing overflow.

Constraints

• Do not modify the HTML structure.

• Use only CSS (no JavaScript is allowed).

• Images should preserve their aspect ratio.

• Images should not overflow their container.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.