css - 为什么我的图像在容器内无法正确调整大小

Question

我已经使用此代码自动调整图像大小以适应它所在的容器，此代码在我网站的其他区域工作，所以我不知道为什么它在这里不起作用。我错过了什么吗？

<div className='image-container'>
   <img src={imageRoutes} alt='post' />
</div>

.image-container {
    position: relative;
    height: 400px;
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
}

.image-container img {
    max-height: 100%;
    max-width: 100%;
}

它显示图像以适应容器的角到角而不保持其初始像素比，因此基本上它将图像拉伸到容器宽度的 100% 和 400 像素的高度。

标签： cssreactjsimage

Answer 1

代替 ：

.image-container img {
    max-height: 100%;
    max-width: 100%;
}

做：

.image-container img {
    object-fit: cover;
    display: block;
    height: 100%;
    width: 100%;
}