Updated with demo

[shankscript]

More precise code with demo

[AllThingsSmitty]

@shanksrepo thanks, the demos helps me understand what you're doing. I slimmed down the code some to see more what you're getting at:

<div class="container">
  <div class="content"></div>
</div>

.container {
  width: 20%;
}
.container .content {
  width: 100%;
  height: 0;
  position: relative;
}
.container .content:before {
  padding-top: 100%;
  width: 100%;
  background: #009530;
  content: "";
  position: absolute;
  top: 0;
}

The only real question I have is whether aspect ratio is something that devs do a lot in CSS. It's a nice trick, though.

[robsonsobral]

Shouldn't has a note on the padding-top about the ratio?

• 100% is 1:1;
• 16:9 is 56.25%: 9 / 16 * 100.

[shankscript]

@AllThingsSmitty Well I used this trick in many of my recent projects. And yes its very specific stuff, however whoever is working on responsive grid will be usefull to them.
And we really don't know what will make whome & when happy :)

Thanks for sharing your views.

[shankscript]

@robsonsobral You are correct your note will help more.

Thanks for sharing your views

[AllThingsSmitty]

Addressed with d28d5dd which references this CSS-Tricks post for more complete centering examples.