CSS：图像在垂直居中时覆盖容器

Question

对于CSS来说还很陌生，我正在尝试实现以下结果：

左容器中的图像（请参见屏幕截图）始终在容器中填充100％，同时垂直居中（并且应该隐藏溢出）。 容器的高度（虚线）取决于三行堆叠的高度。这意味着不能固定容器的高度。

到目前为止，我尝试了以下操作：

<style>
div {height: 100%; max-height: 368px; overflow: hidden;}
img {width: 100%; object-fit: cover; object-position: 0 50%;
</style>

<div >
     <img  src="" alt="" />
</div>

但是，这似乎不起作用。 object-position属性仅在object-fit设置为none时有效。另外，vertical-align: middle;似乎也不起作用。

预先感谢您的帮助。