Image

The .img class adds some basic styles for an image.

Images with the img class are displayed in their normal browser behavior. In particular, this means that they are their original size. To change the size, the .img--stretch modifier can be used, or the Global Size Modifier

In order to prevent the layout shift, the width and height attribute must be set in the <img> tag with the numerical original sizes of the displayed image. Regardless of whether the image size is changed by modifiers or not, the browser uses the attributes to calculate the space required for the image and makes this available before the image is loaded.

The following list describe all existing block/element/modifier classes of the component.

• .img - required the block class, should be an <img> tag
• Modifier
  • .img--stretch - use width 100%
  • .img--stretch-{SCREEN_SIZE} - until the screen size
  • .img--{RATIO} - add an aspect ratio
  • .img--{RATIO}-{SCREEN_SIZE} - until the screen size
  • .img--{EDGE} - change the edges
  • .img--{EDGE}-{SCREEN_SIZE} - until the screen size
  • .img--{POSITION} - change the object-position
  • .img--{POSITION}-{SCREEN_SIZE} - until the screen size

The values are:

• RATIO 1/1, 5/4, 4/3, 3/2, 5/3, 16/9, 2/1, 3/1, 4/5, 3/4, 2/3, 3/5, 9/16, 1/2, 1/3
• EDGE rounded, circle
• POSITION start, start-top, start-bottom, end, end-top, end-bottom, top, bottom
• SCREEN_SIZE lg, md, sm, xs

Basic Example:

Modifier

A image can be customized using class modifiers.

Ratio

The ratio modifier can help you to manage the size of the resolution. It makes it more responsively and easier to handle embeds based on the width of the parent.

Edge

With this modifier you can change the edges of an image.

Position

Normally the object-position is set to center. With this modifier you can change the position.