为什么我的图像不能在容器内正确调整大小答案

【问题标题】：Why is my image not resizing properly within the container为什么我的图像不能在容器内正确调整大小
【发布时间】：2020-12-22 21:44:14
【问题描述】：

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

<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 像素的高度。

【问题讨论】：

寻求代码帮助的问题必须包含最短代码以便在问题本身中包含重现它所必需的最好是Stack Snippet。见How to create a Minimal, Reproducible Example
请提供{imageRoutes} 的网址，这让我们不知道您在说什么
抱歉，imageRoutes 只是使用输入（type='file）上传的图像，所以图像可以是任意大小，但似乎都没有正确调整大小。跨度>

标签： css reactjs image

【解决方案1】：

而不是：

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

做：

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

【讨论】：