CSS Aspect Ratio Boxes

CSS Aspect Ratio Boxes

I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.

[…]

So how do we figure out the padding-top for our 1127.34 × 591.44 SVG above?

[…]

FitVids is jQuery based, but there are vanilla JavaScript options, like this one by Ross Zurowski.

[…]

Tommy Hodgins has CSSplus which features Aspecty which is just for this, assuming you're cool with a JavaScript parsing and changing your CSS kinda thing:

[…]

See Also

Cross-document view transitions for multi-page applications

Get started with cross-document view transitions for use in your multi-page application (MPA).

Do you know about overflow: clip?

You probably know overflow: hidden, overflow: scroll and overflow: auto, but do you know overflow: clip?

Transitioning To Auto Height

I know this is something Chris has wanted forever, so it's no surprise he's already got a fantastic write-up just a day after the news broke. In fact, I first

How To Test Swift Packages

Swift packages are a neat and simple way to bundle up and share code. They remove the overall complexity by not requiring an Xcode project but instead

Replacing Combine with Async/Await in SwiftUI using a HotSignal Class

The HotSignal class is a custom wrapper designed to expose a sequence of events using Swift’s Async/Await features.

Thread safety with Mutex in Swift 6

Today we will be exploring the Mutex struct, seeing how it can be used to prevent crashes and undefined behaviour due to simultaneous reads & writes to shared mutable data.