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.

Practice

1. What does the CSS property aspect-ratio do for an element?

easy

A. It keeps the element's width and height in a fixed ratio to avoid stretching.

B. It changes the element's color based on its size.

C. It hides the element when the screen is too small.

D. It adds a border around the element.

Solution

1. Step 1: Understand the purpose of aspect-ratio

   The property controls the ratio between width and height to keep the shape consistent.

2. Step 2: Identify the effect on element shape

   It prevents the element from stretching or squishing by maintaining the ratio.

3. Final Answer:

   It keeps the element's width and height in a fixed ratio to avoid stretching. -> Option A

4. Quick Check:

   Aspect ratio = fixed width/height ratio [OK]

Hint: Aspect ratio locks shape, not color or visibility [OK]

Common Mistakes:

• Thinking it changes colors
• Assuming it hides elements
• Confusing with border properties

2. Which of the following is the correct syntax to set an aspect ratio of 16:9 in CSS?

easy

A. aspect-ratio: 16:9;

B. aspect-ratio: (16, 9);

C. aspect-ratio: "16/9";

D. aspect-ratio: 16 / 9;

Solution

1. Step 1: Recall the correct syntax format

   The aspect-ratio property uses a ratio with a slash between numbers, no quotes or commas.

2. Step 2: Match the correct option

   aspect-ratio: 16 / 9; uses 16 / 9 which is the correct way to write the ratio.

3. Final Answer:

   aspect-ratio: 16 / 9; -> Option D

4. Quick Check:

   Use slash between numbers for aspect ratio [OK]

Hint: Use slash (/) between numbers, no quotes or commas [OK]

Common Mistakes:

• Using colon instead of slash
• Adding quotes around ratio
• Using parentheses or commas

3. Given this CSS code:

div {
  width: 320px;
  aspect-ratio: 4 / 3;
  background-color: lightblue;
}

What will be the height of the div when rendered in the browser?

medium

A. 480px

B. 240px

C. 320px

D. 213px

Solution

1. Step 1: Understand aspect ratio formula

   The aspect ratio 4 / 3 means width divided by height equals 4/3.

2. Step 2: Calculate height from width

   Height = Width ÷ (4/3) = 320 ÷ (4/3) = 320 x (3/4) = 240px.

3. Final Answer:

   240px -> Option B

4. Quick Check:

   Height = width x (height/width) = 240px [OK]

Hint: Height = width x (height ÷ width) from ratio [OK]

Common Mistakes:

• Dividing height by width instead of width by height
• Using width as height
• Confusing ratio numbers

4. What is wrong with this CSS code if the element does not keep the expected 1:1 aspect ratio?

.box {
  width: 200px;
  aspect-ratio: 1 / 1;
  height: 150px;
  background: coral;
}

medium

A. The fixed height overrides the aspect ratio, causing distortion.

B. The aspect ratio syntax is incorrect.

C. The width must be set in percentages for aspect ratio to work.

D. Background color prevents aspect ratio from applying.

Solution

1. Step 1: Identify conflicting properties

   The CSS sets both width and height explicitly, which conflicts with aspect-ratio.

2. Step 2: Understand aspect-ratio behavior

   When height is fixed, the aspect ratio cannot adjust height automatically, so the shape distorts.

3. Final Answer:

   The fixed height overrides the aspect ratio, causing distortion. -> Option A

4. Quick Check:

   Fixed height blocks aspect ratio adjustment [OK]

Hint: Avoid fixed height when using aspect-ratio [OK]

Common Mistakes:

• Thinking syntax is wrong
• Believing background affects ratio
• Assuming width must be %

5. You want a responsive square div that always stays square regardless of screen size. Which CSS setup achieves this best?

hard

A. width: 50vw; height: auto;

B. width: 50vw; height: 50vh;

C. width: 50vw; aspect-ratio: 1 / 1;

D. width: 50vw; max-height: 50vw;

Solution

1. Step 1: Understand responsive sizing with aspect ratio

   Using width: 50vw; sets width to half the viewport width, and aspect-ratio: 1 / 1; keeps height equal to width, making a square.

2. Step 2: Compare other options

   width: 50vw; height: auto; uses height: auto;, which depends on content. width: 50vw; height: 50vh; uses height: 50vh;, half viewport height, so not square on widescreen monitors. width: 50vw; max-height: 50vw; uses max-height: 50vw;, which caps but doesn't enforce square.

3. Final Answer:

   width: 50vw; aspect-ratio: 1 / 1; -> Option C

4. Quick Check:

   Aspect ratio + responsive width = perfect square [OK]

Hint: Use aspect-ratio with responsive width for perfect squares [OK]

Common Mistakes:

• Setting fixed height instead of aspect ratio
• Using height:auto which breaks square shape
• Confusing max-height with height