Child image(height, width in px dynamically) fit to parent div

Question

My issue is that the child image element must fit to the parent div, but the image's height and width are dynamically set.

 .people-image-right-parent { height: 150px; width: 150px;background: #EAEAEA; overflow: auto; } .people-image-right{ width: 220px; object-fit: contain; height: 220px; background: url(http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png) -491px -235px;} 

 <div class="people-image-right-parent"> <img class="people-image-right" /> </div> 

The image's height and width are dynamic, not fixed, and it should be in pixels (px). I don't want the image to be scrollable or hidden. It must fit to parent element or must be contained in the parent element.

Please guide me on how to fit the image to its parent div.

Thanks in advance.

Answer 1

try this one

 .people-image-right-parent { height: 150px; width: 150px; background: #EAEAEA; overflow: hidden; } .people-image-right { width: 100%; object-fit: contain; height: 100%; background: url(http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png) -491px -235px; } 

 <div class="people-image-right-parent"> <img class="people-image-right" class="" /> </div> 

Answer 2

Is this what you were looking for?

 .people-image-right-parent { height: 150px; width: 150px; background: #EAEAEA; overflow: hidden; /* If needed you can change this value to "scroll" or "visible". */ } .people-image-right{ height: inherit; /* If needed you can change these */ width: inherit; /* values to pixel values. */ object-fit: cover; margin: 0; } 

 <div class="people-image-right-parent"> <img class="people-image-right" src="http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png" /> </div> 

Answer 3

I don't know if modifying the html is an option but...

You are much better of using an img tag inside the parent div

In the example below, the images are completely dynamic and will adjust to fit the div no matter what the aspect ratio is. it will also never stretch the image.

 .people-image-right-parent { display: inline-block; width: 150px; height: 150px; background: darkred; line-height: 150px; /* should match your div height */ text-align: center; font-size: 0; } img.people-image-right { max-width: 100%; max-height: 100%; vertical-align: middle; } 

 <div class="people-image-right-parent"> <img class="people-image-right" src="https://unsplash.it/300/300"> </div> <div class="people-image-right-parent"> <img class="people-image-right" src="https://unsplash.it/100/300"> </div> <div class="people-image-right-parent"> <img class="people-image-right" src="https://unsplash.it/300/100"> </div> 

---

Edit:

If you can set the height and width of the img inline - even if it's generated dynamically - but cannot control anything else, see the example below. This will work as long as the width and height are declared in px in the img tag whether it's done manually or dynamically.

 .people-image-right-parent { display: inline-block; width: 150px; height: 150px; background: darkred; line-height: 150px; /* should match your div height */ text-align: center; font-size: 0; } /* demonstration backgrounds */ .bg1 {background: url(https://unsplash.it/500/400);} .bg2 {background: url(https://unsplash.it/200/600);} .bg3 {background: url(https://unsplash.it/900/300);} .people-image-right { max-width: 100%; max-height: 100%; vertical-align: middle; background-size: contain; background-position: center; background-repeat:no-repeat; } 

 <div class="people-image-right-parent"> <img class="people-image-right bg1" style="width:300px ;height:300px"> </div> <div class="people-image-right-parent"> <img class="people-image-right bg2" style="width:100px ;height:300px"> </div> <div class="people-image-right-parent"> <img class="people-image-right bg3" style="width:300px ;height:100px"> </div> 

Answer 4

Here try with this

1. If your image is lower(in PX) than your div,you have to use min-width:100% & min-height:100%;

2. If your image is higher(in PX) than your div,you have to use max-width:100% & max-height:100%;

Here is the example, Your image is higher or lower than the parent div it should fit the parent div.

 .people-image-right-parent { height: 150px; width: 150px; background: #EAEAEA; } .people-image-right{ height: 350px; width: 345px; max-width:100%; max-height:100%; min-width:100%; min-height:100%; margin: 0; } 

 <div class="people-image-right-parent"> <img class="people-image-right" src="http://ndl.mgccw.com/mu3/000/488/937/sss/68ad9b3f576e42399021560560fb3a16_small.png" /> </div>