设置图像最大尺寸

Question

我需要在<img>标签中设置图像的最大高度和宽度.例如,假设最大尺寸为400x400像素,那么如果图像尺寸小于此尺寸,那么它将按原样显示图像,如果尺寸大于那么它应该被压缩到这个尺寸.我怎么能用html或javascript做到这一点？

Answer 1

在CSS中设置max-width和max-height

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

Answer 2

object-fit: scale-down如果图像太大，您还可以使用它来使图像适合容器大小，如果图像小于容器，则保持图像大小不变。

CSS：

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

HTML：

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