javascript - 设置图像最大尺寸

Question

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

Answer 1

在 CSS 中设置max-widthandmax-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

我这样做的方式：

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

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

Answer 5

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

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

Answer 6

在 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);