图像填充父div宽度和高度明智，中心

Question

我正在将一个相当大的图片加载到父div中，我的pug代码如下：

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

这里的要点是width: 100%我可以用以下效果填充父母：

这并不是很糟糕，但是仔细观察，你会发现图像没有填满高度，因为纵横比明显是“瘦”＆＃34;比父div。

我想实现这种效果，其中图像尽可能地填充宽度和高度为conservatively，同时保持相对于父div的居中：

不熟悉html/css，所以请指点。

Answer 1

您可以设置width: 100%;和固定高度 - 以像素为单位：height: --px;

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

Answer 2

在img标签中试用object-fit: cover;