Decoration

Image utilities

A few image manipulation classes.

Notes:

You will need to narrow and widen your browser window to see the effect of these utility class examples below.
For demonstration purposes, the placeholder image has been deliberately made square, with the subject positioned towards the center-middle.

Cover images

img-cover

This class sets the image to expand or contract to the full width and height of its wrapping block.

The proportions of the image are retained. If the actual image rectangle is different from the specified rectangle dimensions in the HTML, this will result in some parts of the image overflowing but hidden. Therefore the image will seem to be cropped.

The image below is a square, but we should only see a middle rectangle of it.

<img class="img-cover" src="" width="" height="" loading="lazy" alt="">

Make your images big enough, but not too heavy

Follow these two rules when using img-cover:

The image will need to be approximately a square. We should ensure no important part of the image is towards the top or bottom edge, otherwise it may get cropped when viewed on wider viewports.
Be sure to optimize the filesize of your image. We don’t want to make users wait a long time (several seconds, or more) for the image to load if they have a slow connection.

Contained images

img-contain

This class sets the image to expand or contract to the full width or height of its wrapping block.

The proportions of the image are retained. If the actual image rectangle is different from the specified rectangle dimensions in your HTML, this will result in some parts of the specified rectangle not being occupied by the image (whatever is behind the image in your HTML will still be seen).

The image below is a square, therefore on wider viewports, there will be empty space to its right and left.

<img class="img-contain" src="" width="" height="" loading="lazy" alt="">

Note: The CSS classes img-cover and img-contain are designed to work on the <img> tag. They may not work very well on an embedded <svg> (i.e. if you copy-pasted the SVG code into the HTML). But they work fine if an SVG image is inserted into a page the normal way for images: via the <img> tag.

Image CSS filters

Grayscale filter

<img class="img-grayscale" src="" width="" height="" loading="lazy" alt="">

Blur filter

<img class="img-blur" src="" width="" height="" loading="lazy" alt="">

To remove the blurry edges spreading outside of the image rectangle, wrap the image in a block that has the overflow-hidden utility class.

<div class="overflow-hidden">
  <img class="img-blur" src="" width="" height="" loading="lazy" alt="">
</div>