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"