Image Block Fittings

Introduction

page title heading deeplink

All image blocks have the capacity to alter how the image itself is fit to it's constraining viewport and dimension (height or width).

This page highlights on just the data-image-fit attribute and all it's possible values, each demonstrated with the same image to show a contrast as the effects can be subtle.

top

Cover

page title heading deeplink
an example image

Set nothing (as this is the default fitting), or set either: the data-image-fit attribute to cover , or include the word cover in the shorthand data-image space separated attribute.

top

Fill

page title heading deeplink
an example image

Set either: the data-image-fit attribute to fill , or include the word fill in the shorthand data-image space separated attribute.

top

Contain

page title heading deeplink
an example image

Set either: the data-image-fit attribute to contain , or include the word contain in the shorthand data-image space separated attribute.

top

None

page title heading deeplink
an example image

Set either: the data-image-fit attribute to none , or include the word none in the shorthand data-image space separated attribute.

top

Scale-Down

page title heading deeplink
an example image

Set either: the data-image-fit attribute to scale-down , or include the word scale-down in the shorthand data-image space separated attribute.

top