JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div>
  <div class="img">
    <img src="https://via.placeholder.com/500x250" alt="">
  </div>
</div>

<div class="sep"></div>

<div>
  <div class="img">

  </div>
</div>

<div class="sep"></div>

CSS

.img {
  display: flex;
  position: relative;
  padding-bottom: 50%;
  background: #99cc99;
  width: 100px;
  overflow: hidden;
  box-shadow: 0 0 2px 1px gray;
}

.img > img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sep {
  margin: 1em;
}