DEV Community

Christian Heilmann
Christian Heilmann

Posted on

6

Upgrading our CSS habits: aspect-ratio

The CSS aspect-ratio property is pretty amazing. You can define a ratio of width to height and it will resize the element accordingly.

Resizing an element to different aspect ratios

You can try it out in this pen:

Where this shines is videos, image content and embeds. No more hacks with relative positioning and percentages. Browser support is green all over, so, like me, it makes sense to upgrade your CSS habits.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay