Fluid Images in a Variable Proportion Layout

Fluid Images in a Variable Proportion Layout

css-tricks.com css-tricks.com1 year ago in#Dev Love50

Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card: For now, let’s say this image is not semantic content, but only decoration. That’s a good use for background-image. And because in this context the image contains an object, we can’t allow any parts to be cropped out when it’s responsive, so we’d pick background-size: contain. Here’s where it starts to get tricky: on mobile devices, this card shifts direction and becomes vertical, with the image on top. We can make that happen with any sort of CSS layout technique, and probably best handled with CSS grid or flexbox. But as we test for smaller screens, because of the contain property, this is what we get: Hey, get back up there! That’s not very nice. The image resizes to maintain its aspect ratio without cutting off any details, and if the image is important content and should not be cropped, we can’t change background-size to cover. At this point, our next attempt might be familiar to you: placing the image inline, instead the background.  On desktop, this works fine: It’s not bad on mobile either: But on smaller screens, because of all the fixed sizes, the image’s proportions get distorted. Hmm, those strawberries are not as appetizing when stretched. We could spend hours fiddling with the image, the card, the flex properties, going back and forth. Or, we could… Separate main content from the background This is the base for obtaining much more flexibility and resilience when it comes to responsive images. It might not be possible 100% of the time but, in many cases, it can be achieved with a little effort on the design side of things, especially if this approach is planned beforehand. For our next iteration, we’re placing our strawberries image on a transparent background and setting what was the blue color in the raster image with CSS instead. Go ahead and play with viewport sizes in this demo by adjusting the size of the sample space! Looking deeper at the styles, notice that we’ve also added padding to the div that holds the image, so the strawberries don’t come too close to the edges. We have full control of how close or distant we want them to be, through this padding. Note how we’re also using negative margins to compensate for the padding on our outer card wrapper, otherwise we’d get white space all around the image. Use the object-fit property for inline images As much as the previous demo works, we can still improve the approach. Up to now, we’ve assumed that the image was un-semantical content — but with this layout, it’s also likely that the image illustration could be more than decoration. If that’s the case, we definitely don’t want the image to get cut off because that would essentially amount to data loss. It’s semantically better to put the image inline instead of a background to prevent that, and we can use the object-fit property to make it happen. We’ve extracted the strawberries from the background and it’s now an inline element, but we kept the background color in that same image div.  Finally, combining the object-fit: contain with a 100% width makes it possible to resize the window and keep the aspect ratio of the strawberries.  » Read More

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply