Today's newsletter is sponsored by ConfigCat — the feature flag service that helps you release features faster and with less risk. More on them at the end of today's newsletter.
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.
Here's an example.
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).
Are you looking for a service to support dynamic feature flags? ConfigCat is a cross-platform LaunchDarkly alternative that's easy to learn and quick to set up. With SDKs for 19 platforms — including JavaScript, Python, Ruby, Java, and even Rust — you can toggle features on or off without redeploying.
ConfigCat subscriptions are the same price regardless of your team size. Get 25% off any paid plan with code GO25
or just use ConfigCat's generous free tier. Definitely worth checking out.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] An aspect ratio CSS utility class"