Aspect Ratio - Maximising media

by PrismDan

HTML

<div class="full-screen">
  <img src="//source.unsplash.com/1600x900/?landscape" width="1600" height="1000" alt="" />
</div>

CSS

.full-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
}

.full-screen img {
  --percent-of-largest-edge: 80;
  --aspect-ratio-width: 16;
  --aspect-ratio-height: 9;
  height: calc(1vw * (var(--percent-of-largest-edge) * (var(--aspect-ratio-height) / var(--aspect-ratio-width))));
  width: calc(1vw * var(--percent-of-largest-edge));
}
  
@media (min-aspect-ratio: 16/9) {
  
  /* Flip the calculation if the screen is above 16:9 */
  .full-screen img {
    height: calc(1vh * var(--percent-of-largest-edge));
    width: calc(1vh * (var(--percent-of-largest-edge) * (var(--aspect-ratio-width) / var(--aspect-ratio-height))));
  }
}

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;
}