JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<div class="outer -image">
  <div class="inner">
    1. a background image, any aspect ratio
  </div>
</div>

<div class="outer">
  <img src="//placehold.it/2000x1000" alt="" class="image">
  <div class="inner">
    2. an `img` element, if the image has the right aspect ratio
  </div>
</div>

<div class="outer">
  <img src="//placehold.it/4747x470" alt="" class="image -fit">
  <div class="inner">
    3. an `img` element, any aspect ratio as long as ie11 doesn't need to be supported (though doesn't play nice with responsively sswitching to a stacked column layout)
  </div>
</div>

SCSS

.outer {
  height: 0;
  margin-bottom: 20px;
  padding-top: 50%; // or (100% / <aspect-ratio>)
  position: relative;
  
  &.-image {
    background: no-repeat center/cover url(//placehold.it/4747x470);
    height: 0;
    padding-top: 50%; // or (100% / <aspect-ratio>)
    position: relative;
  }
}

.inner {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

.image {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  
  &.-fit {
    object-fit: cover;
  }
}