UI MarCom

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/version/3.1/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</uimc-aspect-ratio>

AttributesDescriptionValuesDefault
formatsSetup for fixed format definition on different viewports{viewport1: ratio2}1x1
object-fitControls whether it is cropped or notcover, containcover
Possible viewports and ratios for the formats attribute

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

SlotSlotted content
defaultAn <img> is obligatory

Covered (cropped image)

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

Contained (no cropping)

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

3x1 panorama

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

21x9 panorama

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

16x9 landscape

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

4x3 landscape

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

1x1 square

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

3x4 portrait

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