设置图像最大尺寸

Question

我需要在 标记中设置图像的最大高度和宽度。例如，最大尺寸为 400x400 px，因此如果图像尺寸小于此尺寸，则它将按原样显示图像，如果尺寸大于此尺寸，则应将其压缩到此尺寸。我怎样才能在 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>

Answer 3

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

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

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

</div>

或类似的东西。 div 是全尺寸的，图像只能扩展到其边界。

Answer 4

在 JavaScript 中你可以使用：

/* getting the image */
var img = document.createElement('img');
img.src = "img.png";

/* setting max width and height */
document.getElementById("id").appendChild(img).style.maxWidth = "400px";
document.getElementById("id").appendChild(img).style.maxHeight = "400px";

/* inserting image */
document.getElementById("id").appendChild(img);

Answer 5

我这样做的方式：

• 上传图像时，如果图像更大（仅），我使用服务器端库来调整大小。你总是缩小尺寸，而不是放大尺寸。
• 然后在客户端我不设置图像大小。

仅对于那些恰好等于该尺寸或更大的图像，图像的尺寸才为 400x400。

Answer 6

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

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