Center fit images of any size to parent div - html

Question

I've got an image slider, the selected image is set as the main image above. All the images are not same size. How do I make sure that each image is centered in the parent div and the entire parent div?
I'm now doing it with:
width: 100%;height: 100%;object-fit:fill;
but then my image loses the bottom of its content. I would like to center the image vertically.
My parent div has following class style:
.wrapper_image{
max-width:100%;
max-height:100%;
min-height:100%;
min-width: 100%;
margin: 0 auto;
}
code:
<div class="o-grid__col u-12/12" style="width: 400px;
height: 400px;
position: relative;
display: inline-block;
overflow: hidden;
text-align: center;
margin: 0;">
<div class="mySlides wrapper_image_horses">
<img src='url' style="width: 100%;height: 100%;object-fit:fill;">
</div>
</div>

Answer 1

I suggest you use display: flex; to achieve this. With flex it is much easier for you to align you images to center vertically and horizontally. Below is a test code I have done. Hope it helps with your problem
HTML
<div class="d-flex h-100">
<div class="img-slide">
<img src="https://via.placeholder.com/150">
</div>
</div>
CSS
.d-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.h-100 {
height: -webkit-fill-available;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/y5fzvox8/

Answer 2

Here is a modern solution, hope it will help you
DEMO
<div class="o-grid__col u-12/12" style="width: 400px;
height: 400px;
position: relative;
display: inline-block;
overflow: hidden;
text-align: center;
margin: 0;
border: 1px solid #000;">
<div class="mySlides wrapper_image_horses" style="position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);">
<img src='https://picsum.photos/id/159/200/200' style="width: auto;height: auto;">
</div>