JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<section class="box">
  <figure>
    <figcaption>object-fit: cover</figcaption>
    <img class="bg1" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" />
  </figure>
  <div class="pointer" id="a"><b>⬅</b>
    <br/>Space</div>
  <figure>
    <figcaption>object-fit: contain</figcaption>
    <img class="bg2" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" />
  </figure>

  <aside>
    <p><code>object-fit: cover</code> will stretch an image to the edges of it's container (parent element) while keeping aspect ratio and cropping.</p>
    <div class="spacer">&nbsp;</div>
    <p><code>object-fit: contain</code> will stretch an image to the edges of it's container while keeping aspect ratio but will not crop at the edges, so as you can see, this image has space below and above.</p>
  </aside>
  <div class="pointer" id="b"><b>⬅</b>
    <br/>Space</div>
</section>

CSS

.bg1 {
  width: 270px;
  height: 152px;
  object-fit: cover;
  outline: 2px dashed blue;
}
.bg2 {
  width: 270px;
  height: 152px;
  object-fit: contain;
  outline: 2px dashed blue;
}
aside {
  height: 100%;
  width: 40%;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}
figure {
  height: 180px;
  width: 270px;
  max-width: 50%;
}
.pointer {
  position: absolute;
}
.pointer b {
  font-size: 32px;
}
#a.pointer {
  top: 43%;
  left: 52%;
}
#b.pointer {
  bottom: 5%;
  left: 52%;
}
.box {
  width: 600px;
  height: 450px;
  position: relative;
}
.spacer {
  position: relative;
  padding: 15% 0;
  width: 2px;
}
code {
  font-family: Consolas;
  color: red;
}

JavaScript

/* We know this is a widescreen poster with the aspect ratio of 16:9, so if you want a width of 270px, do the following:

    270/16 = 16.875
    16.875 * 9 = 151.875
    Round up to 152px
    152px is the height of an image that's 270px wide and has an aspect ratio of 16:9 */