时间戳

首页 > 解决方案 > css：图像在垂直居中时覆盖容器

html - css：图像在垂直居中时覆盖容器

问题描述

作为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;似乎也不起作用。

在此先感谢您的帮助。

标签： htmlcssimagecentering

解决方案

推荐阅读