Maintain aspect ratio of div but fill screen width and height in CSS?

Viewport units: A CSS superhero

Viewport units (vw, vh) are like superheroes of CSS, they do heavy lifting for responsive designs. To stretch your div to cover the whole screen, set your max-width and max-height in relation to the viewport. A tiny CSS trick that can make your layout design as flexible as a gymnast!

.fullscreen-ratio {
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
}


Vertical and horizontal centering: the first hurdle in CSS

Remember, centering content can be easier than catching a fly with chopsticks! Make your life easier with flex. Here's a little CSS "lifehack" to center your content:

.fullscreen-ratio {
  display: flex;
  justify-content: center; /* Makes the fly land in the middle of the chopsticks horizontally */
  align-items: center; /* And now, vertically. */
}


Browser support: No CSS superhero left behind

CSS features are like Avengers — some might not be supported in all browsers (looking at you, IE). So you gotta check the "power rating" of CSS features on caniuse.com. Otherwise, you may need an old-school Captain America-esque trick for fallbacks.

An "Alakazam!" for aspect ratio

Got more elements to deal with? Use a CSS mixin or function like some magical spell to give all of them the same superpowers of maintaining consistent ratios!

// mixin in SCSS - A real life "Alakazam" spell
@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    content: '';
    display: block;
    padding-top: calc((100% / ($width / $height)));
  }
  > .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}


When the world isn’t a fixed size

Use media queries to wear "Invisibility Cloaks" on your content at different viewport sizes:

@media (max-width: 768px) {
  .fullscreen-ratio {
    font-size: calc(1rem + 2vw); /* Because, even wizards need their text size to grow! */
  }
}

@media (orientation: portrait) {
  .fullscreen-ratio {
    height: calc(100vh);
    width: calc(100vh * (16 / 9)); /* Because, wizards love their portraits! */
  }
}


object-fit: For the mirror of Erised

For images and videos, object-fit is your magical spell to make them abide by your "Desire to fill up the space" while maintaining aspect ratio:

.fullscreen-media {
  object-fit: cover;
}


Hidden magic in the backdrop

Put some magic in the backdrop with gradient or patterns to slightly hint the aspect ratio:

.background-indicator {
  background: linear-gradient(45deg, #ccc 25%, transparent 25%), 
              linear-gradient(-45deg, #ccc 25%, transparent 25%);
}


Dialing back the magic: Dealing with averagely magical (old) browsers

Before CSS3 came along with its newer spells, wizards used old tricks for aspect ratio. These are still handy for ancient browsers, and they work like a charm (pun intended). Here's a magical "old books" trick:

.legacy-ratio {
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}
.legacy-ratio > .content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


Manipulating the magic: precise magical charms

Play around with using rem and vw to scale your fonts like a magic trick:

.scalable-text {
  font-size: calc(1rem + 0.5vw);
}


Last but not least, @Danield's spellbook

Consider @Danield's spellbook for an in-depth discussion on aspect ratios and practical implementations.