我正在尝试在上传后调整图像尺寸。假设我上传的图片最初尺寸为 450x700,其父容器尺寸为 400x400。在我的例子中,我使用 object-fit
通过保留宽高比来适应其父容器的图像,它看起来像
但我需要完整地显示图像,object-fit
不是这种情况的正确选择。删除 object-fit
并添加 width
和 height
100%
使其完全可见,同时降低质量。这里看起来像
最后一张图原图是这个
已更新
实际上,我可以用 object-fit: contain
解决它,但它不是 100% 适合我,或者也许没有其他方法。有了包含,我明白了
您可以注意到图像的白色背景,这与容器的背景颜色(浅灰色)不相称。有没有解决的可能?
最佳答案
当您说 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)图像以适应图像总是会扭曲并因此降低图像质量。
关于javascript - 如何调整父容器内的图像尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59102162/