Aspect Ratio Stable

Applicable aspect ratios to control image formats regardless of the source.

<uimc-aspect-ratio formats='{"xs": "16x9"}' object-fit="contain">
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

Attributes	Description	Values	Default
formats	Setup for fixed format definition on different viewports	{viewport¹: ratio²}	`1x1`
object-fit	Controls whether it is cropped or not	`cover`, `contain`	`cover`

Possible viewports and ratios for the formats attribute

¹ viewport: xs, sm, md, lg, xl
² ratio: 16x9, 3x1, 21x9, 4x3, 3x4, 1x1

Slot	Slotted content
default	An `<img>` is obligatory

Covered (cropped image)

covered image — 16x9 ratio covered by the image

<uimc-aspect-ratio formats='{"xs": "16x9"}'>
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

Contained (no cropping)

<uimc-aspect-ratio formats='{"xs": "16x9"}' object-fit="contain">
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

3x1 panorama

<uimc-aspect-ratio formats='{"xs": "3x1"}'>
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

21x9 panorama

<uimc-aspect-ratio formats='{"xs": "21x9"}'>
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

16x9 landscape

<uimc-aspect-ratio formats='{"xs": "16x9"}'>
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

4x3 landscape

<uimc-aspect-ratio formats='{"xs": "4x3"}'>
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

1x1 square

<uimc-aspect-ratio formats='{"xs": "1x1"}'>
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

3x4 portrait

<uimc-aspect-ratio formats='{"xs": "3x4"}'>
  <img src="/ui-marcom/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>