Image fill parent div width and height wise, and center

Question

I am loading a rather large image into the parent div and my pug code is as follows:

a.eventlist-column-thumbnail.content-fill(href=`${link}`)
    img(src=`${img_src}`, alt=`${img_src}`, style='position: static; float:left; width: 100%;')

The point here is that with width: 100% I am able to fill the parent w/ the following effect:

This isn't bad however as you look closely, you'll see that the image does not fill the height, because aspect ratio wise it is "skinnier" than the parent div.

I would like to achieve this effect where the image fills the width and height as conservatively as possible while remaining centered relative to parent div:

Not very familiar with html/css , so please give pointers.

Answer 1

You can set width: 100%; and fixed height - in pixels: height: --px;

— — https://jsfiddle.net/ge5o91vg/4/

Answer 2

try object-fit: cover; in img tag