Fluid Images in a Variable Proportion Layout

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 wed pick background-size: contain.

Here’s where … Read article “Fluid Images in a Variable Proportion Layout”

The post Fluid Images in a Variable Proportion Layout appeared first on CSS-Tricks.