javascript - 如何调整父容器内的图像尺寸？

Question

我正在尝试在上传后调整图像尺寸。假设我上传的图片最初尺寸为 450x700，其父容器尺寸为 400x400。在我的例子中，我使用 object-fit 通过保留宽高比来适应其父容器的图像，它看起来像

但我需要完整地显示图像，object-fit 不是这种情况的正确选择。删除 object-fit 并添加 width 和 height 100% 使其完全可见，同时降低质量。这里看起来像

最后一张图原图是这个

已更新

实际上，我可以用 object-fit: contain 解决它，但它不是 100% 适合我，或者也许没有其他方法。有了包含，我明白了

您可以注意到图像的白色背景，这与容器的背景颜色(浅灰色)不相称。有没有解决的可能？

Answer 1

当您说 object-fit 不起作用时，是因为它正在裁剪图像吗？您是否尝试将 object-fit: cover 更改为 object-fit: contain？

另一种选择是将图像作为背景图像，并设置 background size 包含。这将相应地缩放图像以适应边界。例如

.image__wrapper {
    background: url(../your-img.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

不幸的是，拉伸(stretch)图像以适应图像总是会扭曲并因此降低图像质量。