JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<picture class="pic object-fit-fill">
  <img alt=""/>
</picture>
<picture class="pic object-fit-contain">
  <img alt="" />
</picture>
<picture class="pic object-fit-cover">
  <img alt="" />
</picture>

SCSS

.pic {
  position: relative;
  &:before {
    position: absolute;
    line-height: calc(300px - 1em);
    width: 100%;
    text-align: center;
    color: white;
    font-family: sans-serif;
    font-weight: 600;
    text-shadow: 2px 2px 2px black;
  }
  &.object-fit-fill {
    &:before {
      content: 'FILL / PadrĂŁo';
    }
    > img {
      object-fit: fill;
    }
  }
  &.object-fit-contain {
    &:before {
      content: 'contain';
    }
    > img {
      object-fit: contain;
    }
  }
  &.object-fit-cover {
    &:before {
      content: 'cover';
    }
    > img {
      object-fit: cover;
    }
  }
  > img {
    width: 200px;
    height: 300px;
    background-color: #FCC;
    border: 1px dashed red;
    object-position: center;
  }
}

JavaScript

const imgUrl =...