Dublin Library

The Publishing Project

An Interesting Image CSS Reset

  • 1 min. read

 

I came accross reset from Harry Roberts (from Twitter/X) via (Kevin Powell's YouTube video).

I've adapted the reset by eliminating the low quality image resource. I don't need the low quality images (at least I don't think I do).

The initial image styles look like this:

img {
  max-width: 100%; 							/* 1 */
  height: auto;								/* 1 */
  vertical-align: middle;			  		/* 2 */
  font-style: italic;						/* 3 */
  font-size: .75rem;						/* 4 */
}

Each line performs a specific task:

  1. Allow for fluid image sizing while maintaining the image aspect ratio
  2. Remove ‘phantom’ whitespace. Softer way to get the same effect as display: block
  3. Italicises alt text to visually offset it from surrounding copy
  4. Set up for shape outside. Stays inert until you use shape-outside

Below is the video where Kevin explain his analysis of the image reset tag.

This prompts a bigger question: How much of a reset do we really need and how much should we set our own defaults?

Edit on Github