Display mode of images

The "Display mode" determines how an image should be adjusted in size in order to fit into its image container.

contain

also called "Fixed height"

The image keeps its aspect ratio, but will be adjusted to fit within the given height of the image container.

This means that there may be gaps on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.

Photo by Jeremy Bezanger on Unsplash

cover

also called "Cropped"

The size of the image is adjusted so that the aspect ratio is retained and the entire image container is filled. Any overflow is cropped.

In this mode, the image container is filled in each viewport. This results in the image being 'cut off' on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.

Photo by Jeremy Bezanger on Unsplash

stretch

also called "Scaled"

The image is scaled to the width of the image container without any height restrictions.

This means that there may be gaps on the top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.

Photo by Jeremy Bezanger on Unsplash

none

also called "Original" or "Standard"

The image size will not be changed.

Photo by Jeremy Bezanger on Unsplash

scale-down

The image will be scaled down to the smallest version of 'none' or 'container'.

This means that there may be gaps on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.

Photo by Jeremy Bezanger on Unsplash