Earlier this year, I’d been experimenting with paper effects. I created a handful of pens on CodePen that (with a containing div and some styling) could turn an image into a folded poster, leaning cards, a coffee table book, or a trapper keeper.
CDS in 2020 was a bit different, like everything else. It was online, and the talks were more bite-sized at roughly 10 minutes each. I really enjoyed this new style of the summit and, while I missed the in-person aspects of the conference, this was a great way to end the year. So, without further ado, here’s what I’m most excited about from the conference!
The CSS property object-fit instructs an img to act as the container for its own contents. We can then use the value cover to have the image content behave similar to a background-image by scaling up or down to fit the provided dimensions. If the goal is for the image contents to remain fully visible within a container while maintaining its aspect ratio, we can use the value scale-down.