Aspect ratio in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a fixed aspect ratio of 16:9 on the box.

CSS

div {
  aspect-ratio: [1];
  background-color: lightblue;
  width: 300px;
}

Drag options to blanks, or click blank then click option'

A4/3

B9/16

C1/1

D16/9

Attempts:

3 left

💡 Hint

Common Mistakes

Using 9/16 instead of 16/9 reverses the ratio.

Forgetting to use a slash between numbers.

The aspect-ratio property accepts a ratio like 16/9 to keep the width and height proportional.

2fill in blank

medium

Complete the code to keep the aspect ratio of the image container at 4:3.

CSS

.image-container {
  aspect-ratio: [1];
  width: 400px;
  background-color: #ddd;
}

Drag options to blanks, or click blank then click option'

A4/3

B3/4

C16/9

D1/1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 3/4 instead of 4/3 flips the ratio.

Using 16/9 which is a different ratio.

Setting aspect-ratio: 4/3; keeps the container width to height ratio as 4 to 3.

3fill in blank

hard

Fix the error in the CSS to correctly apply a 1:1 aspect ratio.

CSS

.square {
  aspect-ratio: [1];
  width: 200px;
  background-color: coral;
}

Drag options to blanks, or click blank then click option'

A1-1

B1:1

C1/1

Dsquare

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1:1 or 1-1 instead of 1/1.

Using a named value like 'square' which is invalid.

The correct syntax for aspect ratio uses a slash, like 1/1, not a colon or dash.

4fill in blank

hard

Fill both blanks to create a responsive video container with a 16:9 aspect ratio and a max width of 600px.

CSS

.video-container {
  aspect-ratio: [1];
  max-width: [2];
  background-color: black;
}

Drag options to blanks, or click blank then click option'

A16/9

B600px

C400px

D4/3

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping aspect ratio values.

Using width instead of max-width.

Use aspect-ratio: 16/9; for widescreen and max-width: 600px; to limit container size.

5fill in blank

hard

Fill all three blanks to create a card with a 3:2 aspect ratio, a width of 300px, and a light gray background.

CSS

.card {
  aspect-ratio: [1];
  width: [2];
  background-color: [3];
}

Drag options to blanks, or click blank then click option'

A3/2

B300px

Clightgray

D2/3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 2/3 instead of 3/2 flips the ratio.

Using 'gray' instead of 'lightgray' for background.

The card uses aspect-ratio: 3/2; for width to height ratio, width: 300px; for size, and background-color: lightgray; for color.