Codebase

Documentation

Responsive Layouts
Utilities
Components
Decoration Utilities

Image Utilities

A few image manipulation classes.

Cover images

.img-cover – this class sets the image to expand (or contract) to the full width and height of its wrapping block, without distortion.

You will need to narrow and widen your browser window to see the effect of this utility class.

<img class="img-cover" src="">

Notes:

  1. This utility class works on the <img> tag. It does not work very well on an embedded <svg>. But it works fine on an SVG image inserted into a page the normal way for images: <img src="filename.svg">.
  2. Your image will need to be approximately a square. Also, ensure that the most important part of your image is in the center and middle – otherwise it may get “cropped” when viewed on some device sizes (or browser widths).
Your "image-cover" image on a larger deviceYour "image-cover" image on a smaller deviceVisitors will only see this vertical sliceWhy "image-cover" images need to be approximately squareYou set this height constraint** Best practice is to make this set height responsive, or smaller for smaller viewports.Visitors will only see this horizontal slice

Grayscale filter

<img class="img-grayscale" src="">

Blur filter

<img class="img-blur" src="">

Don’t like the blurry edges spreading outside of the image rectangle? Then wrap the image in a block that has the .overflow-hidden utility class.

<div class="overflow-hidden">
  <img class="img-blur" src="">
</div>