How does the padding in this element work?

Question

I am having trouble understanding how the padding-bottom: 100% in the element
.art-templates-image-container is used to display the contents "properly".

So basically, try to remove the padding-bottom: 100% on the .art-templates-image-container and try to look at the element: the content is not visible. But, when you add the padding again: the content is now visible!

Can anyone explain how this works?

.art-templates-container {
  display: flex;
}

.art-templates-item {
  flex-basis: 29%;
  overflow: hidden;
  margin: 10px;
  border: 1px solid #b8b8b8;
  padding: unset;
}

.art-templates-image-container {
  position: relative;
  /* min-height: 270px; */
  background-color: #fff;
  overflow: hidden;
  padding-bottom: 100%;
}

.art-templates-item-image {
  max-width: 190px;
  display: block;
  position: absolute;
  max-height: 150px;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

<div class="art-templates-container">
  <div class="art-templates-item">
    <div class="art-templates-image-container" style="background-color: rgb(255, 202, 222);"><img class="art-templates-item-image" src="https://d1xoshz9ol1c5p.cloudfront.net/images/development/generated-artworks/78edbb9c-7717-4a29-86d1-3a247b2573b9.png"></div>
    <div class="art-templates-item-info-div">
      <div class="art-templates-item-name">Artwork: 0313</div>
      <div class="art-templates-item-likes"><span class="art-templates-item-like-number"></span><span class="art-templates-item-heart unliked"></span></div>
    </div>
    <div class="art-templates-item-button-container">
      <div class="tzilla-green-button art-templates-item-button" data-tzilla-modal-trigger="modal-art-templates" data-template="2606">Add Template</div>
    </div>
  </div>
</div>

How does the padding in this element work?

0 Answers0