Aspect Ratio - Intrinsic aspect ratio

by PrismDan

HTML

<figure>
  <figcaption>600 x 400 image in a 1:1 ratio</figcaption>
  <div class="aspect-ratio-1-1">
    <img src="//source.unsplash.com/600x400/?sky" width="600" height="400" alt="" />
  </div>
</figure>

<figure>
  <figcaption>960 x 540 video in a 1:1 ratio</figcaption>
  <div class="aspect-ratio-1-1">
    <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
  </div>
</figure>

<figure>
  <figcaption>iFrame in a 1:1 ratio</figcaption>
  <div class="aspect-ratio-1-1">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</figure>

CSS

.aspect-ratio-1-1 {
  padding-top: 100%;
  position: relative;
}

.aspect-ratio-1-1 > img,
.aspect-ratio-1-1 > video,
.aspect-ratio-1-1 > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aspect-ratio-1-1 > img,
.aspect-ratio-1-1 > video {
  object-fit: cover;
}

body {
  background-color: #023e50;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  min-height: 100vh;
  color: #fff;
  font-family: monospace;
  padding: 2em;
  text-align: center;
  box-sizing: border-box;
}

figure {
  margin: 2em auto;
  position: relative;
  border: 1px dashed rgba(255, 255, 255, .25);
  padding: 1em;
  overflow: hidden;
  max-width: 400px;
}

figcaption {
  margin-bottom: 1em;
}