0

I am trying to make a responsive square in CSS, I wrote the following HTML for the same.

.square-container {
  position: relative;
  height: 0;
  width: 50%;
  padding-bottom: 50%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
<div class="square-container">
  <img class="content" src="https://static.toiimg.com/photo/48553824/.jpg">
</div>

This code is working perfectly. But I have a doubt, how is the height of child element that is img in this case is effected by padding-bottom of parent element.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Laveena
  • 97
  • 1
  • 10
  • 1
    Note: the `` tag does not use and does not need a closing slash and never has in HTML. – Rob Mar 01 '20 at 12:13
  • the padding-bottom is setting the height of the parent to keep the ratio and the image which is out of the flow is using that height (note the height:100%) – Temani Afif Mar 01 '20 at 12:18

0 Answers0