Aspect Ratio Stable

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

Covered

<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

<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

<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

<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

<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

<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

<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

<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>