设置图像最大尺寸

Question

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

Answer 1

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

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

Answer 2

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

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

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

</div>

或类似的东西。 div是完整大小，图像只能扩展到其边界。

Answer 3

我这样做的方式：

• 当图像上传时，如果图像较大（仅限），我会使用服务器端库来调整大小。你总是调整大小，永远不要起来。
• 然后在客户端我没有设置图像大小。

仅适用于那些大小或更大的图像，图像将为400x400。

Answer 4

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

像这样：http://jsfiddle.net/fMuVw/

Answer 5

如果图像太大，也可以使用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>