Skip to main content

Aspect Ratio & Object Fit — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Aspect Ratio & Object Fit lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Set a widescreen ratio

    easy10 min

    Give #box a 16/9 aspect ratio.

  2. 2

    Make it square

    easy10 min

    Give #box a 1/1 aspect ratio.

  3. 3

    Cover the box

    easy10 min

    Set object-fit to cover on #box.

  4. 4

    Contain the content

    easy10 min

    Set object-fit to contain.

  5. 5

    Combine ratio and fit

    medium10 min

    A 4/3 box whose content covers it.

Find the bug(5)

  1. 1

    Fix the misspelled property

    easy8 min

    The property is aspect-ratio.

  2. 2

    Fix the ratio written with a colon

    easy8 min

    A CSS ratio uses a slash, not a colon.

  3. 3

    Fix the wrong fit value

    easy8 min

    "fill-cover" is not a valid object-fit value.

  4. 4

    Fix cover used where contain was meant

    easy8 min

    The content should fit entirely inside the box.

  5. 5

    Fix the inverted ratio

    easy8 min

    A 4/3 box is wider than it is tall.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace