#022: Flexy Images (Figures and Figcaptions)

Before we do some typography work, I thought we would fix the annoying thing where the images are busting outside of the article area and the grid. Using some simple CSS rules to override inline image attributes and style, we can squish images to fit into our post at the correct size.

Squishing images like this used to be rather uncool as browsers did a bad job of resizing, but this isn’t the case anymore. It’s actually kind of a good idea as displays are getting higher resolution, as the images will be sharper.

The resizing is essentially dealt with by:

figure img {
  max-width: 100%;
  height: auto !important;
}

We style up the figures and figcaptions just a little bit to make them look, you know, like a proper figure in a blog post.