設置圖像最大尺寸

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

您還可以使用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 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);