CSSmarkup~30 mins

Aspect ratio in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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

Need a hint?

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

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


  



  /* Your code here */

Need a hint?

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

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


  



  .box {
    width: 80%;
    background-color: #4CAF50;
    /* Your code here */
  }

Need a hint?

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

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



  
  
    
  
  
    
      
    

    
      .box {
        width: 80%;
        background-color: #4CAF50;
        aspect-ratio: 16 / 9;
      }

Need a hint?

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