If you display images in blog or article posts on a website, chances are you have a defined width to work with. Rather than having to resize images just to fit them into the column neatly, you can use a CSS rule to automatically adjust the image size for you:

img {
  height: auto;
  max-width: 550px;
}

The above specifies that elements should be scaled down to 550 pixels, if they are wider than that. We then need to adjust the height so the image is scaled proportionately. By setting height to auto, we allow CSS to calculate the proportions for us.

Here’s an example photo that is 800×600 pixels:

The HTML even specifies the size:

My CSS rule automatically shrinks the image.

So now you can display an image of any size, and CSS will handle displaying it neatly within the column.