设置图像最大尺寸答案

【问题标题】：Set image max size设置图像最大尺寸
【发布时间】：2011-10-14 05:43:36
【问题描述】：

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

【问题讨论】：

标签： javascript html image image-size

【解决方案1】：

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

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

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

</div>

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

【讨论】：

【解决方案2】：

我的做法：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。祝你好运?