Property padding

A shorthand property for all the padding-*
properties

Implementing aspect-ratio

When an element has a vertical percentage
padding, it will be based on its parent width.

When the headline has padding-top: 50%, the
value is computed based on its parent width.
Since the width of the parent is 200px, the
padding-top will become 100px.

<article class="card">
  <div class="card__thumb">
    <img src="thumb.jpg" alt="" />
  </div>
  <div class="card__content">
    <h3>Muffins Recipe</h3>
    <p>Servings: 3</p>
  </div>
</article>

.card__thumb {
  position: relative;
  padding-top: 75%;
}

.card__thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

With the above, we’ve defined that the height of
the card thumbnail wrapper (.card__thumb) depends
on its width. Also, the image is absolutely
positioned and it has the full width and height
of its parent, with object-fit: cover for cases
of uploading a different-sized image.