HuntExams Academy
HTML/CSSIntermediate#css#responsive#layout-puzzle

How do you create a responsive image that maintains aspect ratio without JavaScript?

Use the aspect-ratio CSS property to reserve the correct space and prevent layout shift, combined with width: 100% and height: auto (or object-fit: cover) so images scale responsively.

Example
.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Related Questions

1
HTML/CSSIntermediate#css#cascade

What is the CSS cascade and how is rule conflict order determined?

Open
2
HTML/CSSIntermediate#css#cascade

What does !important do and why should it generally be avoided?

Open
3
HTML/CSSIntermediate#css#pseudo-elements

What is the CSS 'content' property used for with pseudo-elements?

Open