Javascript 如何调整父容器中的图像尺寸？_Javascript_Html_Css_Reactjs

Javascript 如何调整父容器中的图像尺寸？

javascript html css reactjs

Javascript 如何调整父容器中的图像尺寸？,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,我正试图调整上传后的图像尺寸。假设我上传的图像最初有450x700个维度，其父容器有400x400个维度。在我的例子中，我使用objectfit通过保留纵横比来调整图像的父容器，它看起来像但是我需要完全显示图像，对象匹配不是这种情况下的正确选项。移除对象匹配并使用100%添加宽度和高度，使其完全可见，同时降低质量。这里看起来像在最后一个图像中，原始图像如下所示已更新实际上，我可以用对象拟合：contain来解决这个问题，但它不是100%适合我，或者可能没有其他方法。有了包容，我就

我正试图调整上传后的图像尺寸。假设我上传的图像最初有450x700个维度，其父容器有400x400个维度。在我的例子中，我使用

objectfit

通过保留纵横比来调整图像的父容器，它看起来像

但是我需要完全显示图像，

对象匹配

不是这种情况下的正确选项。移除

对象匹配

并使用

100%

添加

宽度

和

高度

，使其完全可见，同时降低质量。这里看起来像

在最后一个图像中，原始图像如下所示

已更新

实际上，我可以用

对象拟合：contain

来解决这个问题，但它不是100%适合我，或者可能没有其他方法。有了包容，我就明白了

您可以注意到图像的白色背景，这与容器的背景色（浅灰色）不匹配。有没有可能解决这个问题？

当你说

对象匹配

不起作用时，是因为它正在裁剪图像吗？您是否尝试将

对象适合度：cover

更改为

对象适合度：contain

另一个选项是将图像作为背景图像，并设置为

contain

。这将相应地缩放图像以适应边界。e、 g

.image\uu包装器{
背景：url（../your img.jpg）；
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
}

不幸的是，将图像拉伸到合适的位置总是会扭曲，从而降低图像质量。

您可以使用css属性

background: url('images_here')no-repeat center center
 background-size: cover (or) contain
 width:400px;
 height: 400px;

如果希望完整图像可见，应使用

object-fit:contain

，请参阅


.contain{对象匹配：contain；}
对象拟合属性
对象匹配：包含：

image parent假设这是您的父容器类。所以您可以像这样添加css

。图像父img{
高度：400px；
宽度：自动；
显示：块；
保证金：0自动；
}

如果其图像标签可以设置

对象适合度：包含

以及高度和宽度，如果其背景图像可以设置

背景大小：包含

如果您使用的是img标签，您可以尝试使用所有三个属性高度：100%；宽度：100%和对象适合度：coverThis只有在上传前编辑图像时才有可能，否则必须用图像剪切的完整图像或包含背景的图像来疤痕。另一种方法是使用一些颜色类用你的图像背景填充背景，但当上传的未知图像@NorayrGhukasyan是我的@NorayrGhukasyan时，这对你来说是不可能的，但我建议你访问KEVIN的ans，在这个链接中，如果图像的背景始终是白色的，可能会对你有所帮助，您可以只为父包装设置背景色（例如，

背景色：白色

），使用带有alpha通道的图片（例如png）或使用SVG。另一种方法是将家长背景设置为白色。

<html>
<head>
<style>
.contain {object-fit: contain;}
</style>
</head>
<body>

<h1>The object-fit Property</h1>

<h2>object-fit: contain:</h2>
<img class="contain" src="SOMEFILENAME.jpg" alt="Paris" style="width:200px"> <!--Put the restricting size value here-->

</body>
</html>