Sizing relative to the parent working diffeently on firefox and chrome - css

Question

I'm using .h-75 from Bootstrap to resize an image relative to its parent div. On Firefox resizing works, but on Chrome it seems to ignore it.
I tried adding object-fit:cover but it didn't work.
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh;">
<img src="./img/mmm.png" class="d-none d-sm-inline h-75">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
I'd like chrome to dynamically resize the image when I reduce the viewport the same way firefox does it.

Answer 1

Solution: ->
Insted of using h-75 class, you can try img-fluid class to <img> tag...it adjust automatically according to viewport.
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh;">
<img src="./img/mmm.png" class="d-none d-sm-inline img-fluid">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
You can try this...

Answer 2

Solution: ->
If you adding max-height on parent div 50vh... So you have to add height same as max-height..
Here is the code...
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh; height: 50vh">
<img src="https://yt3.ggpht.com/a/AGF-l7-BBIcC888A2qYc3rB44rST01IEYDG3uzbU_A=s900-mo-c-c0xffffffff-rj-k-no" class="d-none d-sm-inline h-75 img-responsive">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
I tried on both browsers Firefox and chrome...

Answer 3

In the end I got the intended behavior by chnaging from mex-heigh vh, to just vh.