Images

Now let's look at Oscar's picture. It has no class yet, and still it fits into the card nicely. That's Preflight again. It gives all images these styles:

img {
	display: block;
	max-width: 100%;
	height: auto;
}

• display: block: the picture is a block, on its own line. Without it, a browser shows an image inline, like a word in a sentence, and leaves a small gap below it.
• max-width: 100%: the picture is never wider than its parent. Our picture is 600 pixels wide, but it shrinks to the width of the card.
• height: auto: the height follows the width, so the picture keeps its aspect ratio (its shape: how many times wider than tall it is) and doesn't get distorted.

Cards on a website, though, usually have pictures of the same height, whatever the shape of the photos. When you set both the width and the height of a picture, its box gets a different shape from the picture's own, and the CSS property object-fit decides how the picture fills it:

Here is Oscar's picture in a box that is twice as wide as it is tall (the dashed line):

object-fill

object-cover

object-contain

Most of the time, you want object-cover: the box is filled, and the cat doesn't look squashed. Let's try it step by step.