Javascript 设置图像最大大小

我需要在标签中设置图像的最大高度和宽度。例如，假设最大大小为400x400 px，因此如果图像大小小于此值，则它将显示图像的原样，如果大小大于此值，则应将其压缩为此大小。如何在html或javascript中执行此操作？

尝试使用该大小的div标记并将图像放入其中：

<div style="width:400px; height400px;>

  <img style="text-align:center; vertical-align:middle; max-width:400px;  max-height:400px;" />

</div>

我这样做的方式：

• 上传图像时，如果图像较大（仅限），我会使用服务器端库调整大小。您总是向下调整大小，从不向上调整
• 然后在客户端，我不设置图像大小

---

仅当图像大小正好等于或大于该尺寸时，图像才会为400x400。

在CSS中设置

max width

和

max height

max-width: 400px;
max-height: 400px;

---

类似于这样：

如果图像太大，也可以使用

对象适合：缩小

使图像适合容器大小，如果图像小于容器，则保持图像大小不变

CSS:

HTML:

img
{
    max-width: 400px;
    max-height: 400px;
}

.img-scale-down {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    overflow: hidden;
}

<div style="width: 400px;">
   <img src="myimage.jpg" class="img-scale-down"/>
</div>