This content originally appeared on Go Make Things and was authored by Go Make Things
I’ve been full-steam ahead building a UI library for people who love HTML, powered by modern CSS and Web Components.
I’ll be launching a proper website for it and more details in the next week or three, but today, I wanted to talk quickly about the set of utility classes it’s going to include for setting the aspect ratio on images, videos, and more.
Let’s dig in!
The modern CSS aspect-ratio property
The aspect-ratio property tells the browser to maintain a specific width-to-height ratio on an element regardless of the parent container size.
You provide {height} / {width} as the property value.
<div class="hd-placeholder"></div>.hd-placeholder {
aspect-ratio: 16 / 9;
background-color: lightgray;
}Here, the <div> is always rendered with a 16x9 aspect ratio, regardless of the viewport size.
Here’s a demo. Resize the browser to see it in action.
Creating a set of .aspect-ratio utility classes
To start, I created a generic .aspect-ratio catchall class.
Using an advanced attribute selector, I match all elements that have .aspect-ratio as a class or part of a class.
[class*="aspect-ratio"] {
--ratio: auto;
aspect-ratio: var(--ratio);
}This would match an element with just .aspect-ratio, but also classes like .aspect-ratio-hd or .aspect-ratio-square.
On those elements, I assign a CSS variable of --ratio, with a default value of auto (what the browser does by default). I use that variable as the property of the aspect-ratio property.
Next, I created a handful of classes that adjust the --ratio to specific, common aspect ratios.
.aspect-ratio-hd {
--ratio: 16 / 9;
}
.aspect-ratio-tv {
--ratio: 4 / 3;
}
.aspect-ratio-photo {
--ratio: 3 / 2;
}
.aspect-ratio-square {
--ratio: 1 / 1;
}You could use them like this…
<img class="aspect-ratio-hd" src="an-hd-image.jpg">
<img class="aspect-ratio-square" src="an-square-image.jpg">Because this uses a CSS variable, you can even set your own custom aspect ratio directly on an element, using the .aspect-ratio class and a [style] attribute.
<img class="aspect-ratio" style="--ratio: 5 / 4" src="an-image.jpg">Making images fit
One issue with the aspect-ratio and images is that it will by default resize and distort them.
We can fix that by adding the object-fit property to our root class, with a value of cover.
[class*="aspect-ratio"] {
--ratio: auto;
object-fit: cover;
aspect-ratio: var(--ratio);
}Now, images are automatically scaled and cropped rather than distorted.
iframe videos
Another common use for a class like this is iframe video, and ensuring they scale responsively on various viewports.
For these, I also added a height and width property with values of 100% (again using an advanced attribute selector). This ensures that the video scales up to fit the width of whatever container its in.
iframe[class*="aspect-ratio"] {
height: 100%;
width: 100%;
}As I’m typing this out, I actually think this might benefit from it’s own class, though (because you might want that for images, too).
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-05-08T14:30:00+00:00) An aspect ratio CSS utility class. Retrieved from https://www.scien.cx/2025/05/08/an-aspect-ratio-css-utility-class/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.