Aspect Ratio Stable

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

Covered

covered image
16x9 ratio covered by the image
<div class="aspect-ratio-16x9 aspect-ratio--cover">
  <img src="/ui-marcom/version/2.3/assets/img/brandville/SHS_MR_45010_18.jpg" alt="covered image">
</div>

Contained

16x9 ratio contains the image
<div class="aspect-ratio-16x9 aspect-ratio--contain">
  <img src="/ui-marcom/version/2.3/assets/img/brandville/SHS_MR_45010_18.jpg" alt="contained image">
</div>

3x1 panorama

image with 3x1 ratio
<div class="aspect-ratio-3x1 aspect-ratio--cover">
  <img src="/ui-marcom/version/2.3/assets/img/brandville/SHS_MR_45010_18.jpg" alt="3x1 image">
</div>

21x9 panorama

image with 21x9 ratio
<div class="aspect-ratio-21x9 aspect-ratio--cover">
  <img src="/ui-marcom/version/2.3/assets/img/brandville/SHS_MR_45010_18.jpg" alt="21x9 image">
</div>

16x9 landscape

image with 16x9 ratio
<div class="aspect-ratio-16x9 aspect-ratio--cover">
  <img src="/ui-marcom/version/2.3/assets/img/brandville/SHS_MR_45010_18.jpg" alt="16x9 image">
</div>

4x3 landscape

image with 4x3 ratio
<div class="aspect-ratio-4x3 aspect-ratio--cover">
  <img src="/ui-marcom/version/2.3/assets/img/brandville/SHS_MR_45010_18.jpg" alt="4x3 image">
</div>

1x1 square

image with 1x1 ratio
<div class="aspect-ratio-1x1 aspect-ratio--cover">
  <img src="/ui-marcom/version/2.3/assets/img/brandville/SHS_MR_45010_18.jpg" alt="1x1 image">
</div>

3x4 portrait

image with 3x4 ratio
<div class="aspect-ratio-3x4 aspect-ratio--cover">
  <img src="/ui-marcom/version/2.3/assets/img/brandville/SHS_MR_45010_18.jpg" alt="3x4 image">
</div>