JavaScript, often triggered by window.matchMediaĪ responsive site may utilize one, some, or all of these technologies, depending on the intentions of its designers. Fluid layout techniques, including flexbox, percentage units, and (in the near future) CSS Grids. “Responsive design” is not a single technology but a set of techniques* that allow web pages to serve the needs of both mobile and desktop users. This will enable setting a fixed ratio for an element, like this. The solution for the concern above might be just around the corner with the upcoming aspect-ratio property. That might make things too constrained if we need to generate these cards with a variable amount of text that breaks into several lines. The caveat of this approach, however, is that we need to set a fixed height for the image on the desktop version - otherwise it’s going to follow the proportion of the set width (and reducing it will alter the layout). 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.įinally, combining the object-fit: contain with a 100% width makes it possible to resize the window and keep the aspect ratio of the strawberries. Go ahead and play with viewport sizes in this demo by adjusting the size of the sample space! 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.įor 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. 
This is the base for obtaining much more flexibility and resilience when it comes to responsive images. Or, we could… Separate main content from the background
We could spend hours fiddling with the image, the card, the flex properties, going back and forth. Hmm, those strawberries are not as appetizing when stretched. 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.Īt this point, our next attempt might be familiar to you: placing the image inline, instead the background.īut on smaller screens, because of all the fixed sizes, the image’s proportions get distorted. We can make that happen with any sort of CSS layout technique, and probably best handled with CSS grid or flexbox.īut as we test for smaller screens, because of the contain property, this is what we get: Hey, get back up there! Here’s where it starts to get tricky: on mobile devices, this card shifts direction and becomes vertical, with the image on top. 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. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card:įor now, let’s say this image is not semantic content, but only decoration.
Creating fluid images when they stand alone in a layout is easy enough nowadays.
0 kommentar(er)
