Media

Examples display media using img tag on the left and background-image on the right.

Media sizes

Horizontal size only

Vertical size only

Responsive size

Add the breakpoint before media size to display it only with corresponding screen size (works for all kind of size ahead).

Examples:

• media m on screen size >= breakpoint md, and s otherwise:
  ecl-u-media-a-s ecl-u-media-a-md-m
• horizontal size m on screen size >= breakpoint lg, and s otherwise:
  ecl-u-media-h-s ecl-u-media-h-lg-m

Ratio

To set ratio of an image, wrap it with a ratio class and add class ecl-u-media-content to the image.
The width has to be set using media utilities ahead.

Important: when using ratio, media size and margin/padding have to be put on the ratio wrapper, not on the media itself.

Background image

There are several classes that can be used to manage how the background image is displayed.
CSS properties that can be altered are:

• background-origin
• background-position
• background-repeat
• background-size

Check the playground to see possible combinations.
Here are some examples: