CSS vertical padding based on width, not height

by Julien Roche

HTML

<div class="container">
  <div class="padding">
    <div>padding-top: 100%</div>
    <div>width: 100%</div>
  </div>
  
  <div>Height: 400px, width: 200px;</div>
</div>

CSS

.container {
  background: lightgray;
  height: 400px;
  position: relative;
  width: 200px;
}

.padding {
  color: white;
  background: green;
  padding-top: 100%;
  width: 100%;
}