Aspect ratio in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visible shape of this box?

Given the CSS below, what shape will the box appear as in the browser?

CSS

div {
  aspect-ratio: 16 / 9;
  width: 320px;
  background-color: lightblue;
}

A A rectangle wider than it is tall, with width 320px and height 180px

B A square with width and height both 320px

C A tall rectangle with width 180px and height 320px

D A circle with diameter 320px

💡 Hint

Aspect ratio controls the width to height ratio of the box.

The aspect-ratio 16 / 9 means width is 16 units and height is 9 units. With width fixed at 320px, height is calculated as 320 * 9 / 16 = 180px, making a wide rectangle.

📝 Syntax

intermediate

Which CSS rule correctly sets a 4:3 aspect ratio?

Choose the CSS rule that correctly sets an element's aspect ratio to 4:3.

A aspect-ratio: 4:3;

B aspect-ratio: 3 / 4;

C aspect-ratio: 4 / 3;

D aspect-ratio: "4/3";

💡 Hint

The aspect-ratio property uses a slash (/) between numbers without quotes.

The correct syntax uses a slash between numbers without quotes. Option C is correct. Option C reverses ratio. Options C and D use invalid syntax.

❓ layout

advanced

How does aspect-ratio affect a flex item with fixed width?

Consider a flex container with a child having fixed width and aspect-ratio set. What will be the child's height?

CSS

div.container {
  display: flex;
}

div.child {
  width: 200px;
  aspect-ratio: 1 / 1;
  background-color: coral;
}

A Height will be 400px, double the width.

B Height will be auto ignoring aspect-ratio.

C Height will be 100px, half the width.

D Height will be 200px, making the child a square.

💡 Hint

Aspect ratio sets height based on width when height is not fixed.

With width fixed at 200px and aspect-ratio 1 / 1, height is calculated as 200px to keep a square shape.

❓ accessibility

advanced

Why is using aspect-ratio helpful for accessibility?

Which reason best explains how aspect-ratio improves accessibility in web design?

A It changes font sizes for better readability.

B It prevents layout shifts by reserving space, helping screen readers and keyboard users.

C It automatically adds ARIA labels to images.

D It disables animations that distract users.

💡 Hint

Think about how stable layouts help all users.

Using aspect-ratio reserves space before content loads, preventing layout shifts. This stability helps screen readers and keyboard navigation by keeping focus and content predictable.

🧠 Conceptual

expert

What happens if both width and height are set along with aspect-ratio?

Given this CSS, what will be the final size of the box?

CSS

div {
  width: 300px;
  height: 200px;
  aspect-ratio: 16 / 9;
  background-color: lightgreen;
}

A The box will be 300px wide and 200px tall, ignoring aspect-ratio.

B The box height adjusts to 168.75px to keep 16:9 ratio with width 300px.

C The box width adjusts to 355.56px to keep 16:9 ratio with height 200px.

D The box size is invalid and will not render.

💡 Hint

When both width and height are set, aspect-ratio is ignored.

If both width and height are explicitly set, aspect-ratio is ignored and the box uses those exact dimensions.