2

I have recently updated to Google Chrome Version 72.0.3626.109 (Official Build) (64-bit) in my mac and things are breaking now.

The reason behind having bit complex nested markup is because I need to show the image placed in centre of the div respective of image being different size but proportionally resized inside square div. So, all this was working fine before updating to new google chrome. 

.g-parent {
  width: 150px;
}

.parent {
  position: relative;
  padding-bottom: 100%;
  background-color: gray;
}

.child {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  padding-bottom: 100%;
}

.my-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}
<div>
  <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>

<h4>Show above image inside below div</h4>

<div class="g-parent">
  <div class="parent">
    <div class="child">
      <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
    </div>
  </div>
</div>
Syed
  • 15,657
  • 13
  • 120
  • 154

2 Answers2

2

Not really sure why it was working as height:100% should fail in this case since there is no height set in the parent container. So the actual behavior seems to be the correct one.

You can make the image to be position:absolute to fix this:

.g-parent {
  width: 150px;
}

.parent {
  position: relative;
  padding-bottom: 100%;
  background-color: gray;
}

.child {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  padding-bottom: 100%;
}
.child > img {
  position:absolute;
}
.my-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}
<div>
  <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>

<h4>Show above image inside below div</h4>

<div class="g-parent">
  <div class="parent">
    <div class="child">
      <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
    </div>
  </div>
</div>

You can also simplify this using one div:

.g-parent {
  width: 150px;
}

.parent {
  position: relative;
  padding-bottom: 100%;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color: gray;
}

.my-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}
<div>
  <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>

<h4>Show above image inside below div</h4>

<div class="g-parent">
  <div class="parent" style="background-image:url(https://dummyimage.com/400x200/000/fff)">
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
-2

.g-parent {
  width: 150px;
}

.parent {
  position: relative;
  padding-bottom: 100%;
  background-color: gray;
}

.child {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  padding-bottom: 100%;
}

.my-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}
<div>
  <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>

<h4>Show above image inside below div</h4>

<div class="g-parent">
  <div class="parent">
    <div class="child">
      <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
    </div>
  </div>
</div>
Don Mario
  • 1