Bird
Raised Fist0
CSSmarkup~30 mins

Aspect ratio in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Create a Responsive Box with a Fixed Aspect Ratio
📖 Scenario: You want to create a box on a webpage that keeps its shape no matter the screen size. This is useful for images, videos, or any content where the width and height ratio should stay the same.
🎯 Goal: Build a simple webpage with a colored box that always keeps a 16:9 aspect ratio, resizing smoothly on different screen sizes.
📋 What You'll Learn
Use a semantic HTML structure with a <main> element.
Create a box with a fixed aspect ratio of 16:9 using CSS.
Make sure the box resizes responsively with the browser window.
Use the CSS aspect-ratio property to achieve this.
Add a background color to the box so it is visible.
💡 Why This Matters
🌍 Real World
Web designers often need to keep images or video containers in a fixed shape so they look good on all devices. Using aspect ratio helps maintain consistent layouts.
💼 Career
Knowing how to use CSS aspect ratio is important for front-end developers and UI designers to create responsive and accessible web pages.
Progress0 / 4 steps
1
Create the HTML structure with a main container and a box
Write the HTML code to create a <main> element containing a <div> with the class box. This will be the colored box that keeps the aspect ratio.
CSS
Hint

Use a <div> with class box inside the <main> element.

2
Add basic CSS to style the box with width and background color
Create a CSS rule for the class box that sets its width to 80% and gives it a background color of #4CAF50 (a green shade).
CSS
Hint

Set width: 80% and background-color: #4CAF50 inside the .box CSS rule.

3
Add the CSS aspect-ratio property to keep the box shape
In the CSS rule for .box, add the property aspect-ratio: 16 / 9; to keep the box's width to height ratio fixed at 16:9.
CSS
Hint

Use aspect-ratio: 16 / 9; inside the .box CSS rule.

4
Make the page responsive and accessible
Add a lang="en" attribute to the <html> tag and a meta viewport tag inside the <head> for responsive scaling. Also, add an aria-label="Colored box with 16 to 9 aspect ratio" attribute to the div with class box.
CSS
Hint

Add lang="en" to <html>, a viewport meta tag in <head>, and aria-label to the box <div>.

Practice

(1/5)
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