Aspect ratio in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS aspect-ratio property do?

It controls the width-to-height ratio of an element, keeping its shape consistent regardless of size changes.

beginner

How do you write an aspect ratio of 16:9 in CSS?

Use aspect-ratio: 16 / 9; to keep the element's width and height in a 16 to 9 ratio.

intermediate

Why is using aspect-ratio better than fixed width and height for responsive design?

Because it lets the element resize while keeping the shape, adapting smoothly to different screen sizes.

intermediate

What happens if you set aspect-ratio but only specify width in CSS?

The height adjusts automatically to keep the aspect ratio based on the width you set.

beginner

Can aspect-ratio be used on images and videos?

Yes, it helps keep their proportions correct even if their container changes size.

What does aspect-ratio: 1 / 1; do to an element?

A Makes the element twice as tall as wide

B Makes the element twice as wide as tall

C Makes the element a square

D Has no effect

An aspect ratio of 1 / 1 means width and height are equal, so the element becomes a square.

If you set width: 200px; and aspect-ratio: 4 / 3;, what is the height?

A 150px

B 300px

C 200px

D 100px

Height = width ÷ (aspect ratio) = 200px ÷ (4/3) = 150px.

Which CSS property helps keep an element's shape consistent on different screen sizes?

A background-color

B font-size

C margin

D aspect-ratio

aspect-ratio controls the shape ratio, keeping it consistent when resizing.

Can aspect-ratio be used without specifying width or height?

A Yes, but it needs at least one dimension to work

B No, it always works alone

C Yes, it sets default size

D No, it only works on images

aspect-ratio needs either width or height to calculate the other dimension.

What is the default aspect ratio if none is set?

A 1 / 1

B No fixed ratio; size depends on content or other styles

C 16 / 9

D 4 / 3

Without aspect-ratio, the element's size depends on content or other CSS rules.

Explain how the CSS aspect-ratio property helps in responsive web design.

Think about how images or boxes keep their shape when screen size changes.

Describe how to use aspect-ratio with a fixed width to maintain a 16:9 ratio.

Remember the ratio is width divided by height.

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