Using CSS Aspect Ratio for Consistent Image Sizing

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Instead of defining the size of an element using the width and height properties, CSS also allows you to define its aspect ratio. For example:

<img src=". . ." alt="Image" />

img {
  border: solid 1px;
  width: 200px;

  aspect-ratio: 16 / 9;
}

In this case, the image is set to be 200px wide, and instead of specifying the height, we defined the aspect ratio to be 16:9. The browser will automatically calculate the height based on the ratio.

Visit Code Demo 🔗

Read More

• How to Customize Text Alignment & Text Spacing in CSS
• How to Create Forms in HTML
• How to Build Interactive Forms Using HTML and CSS

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀