设置图像最大尺寸

Question

I need to set maximum height and width of a image in <img> tag. For example say max size is 400x400 px so if the image size is smaller than this then it will show the image as it is and if size is bigger then this then it should be compressed to this size. How can I do this in html or javascript?

Answer 1

Set the max-width and max-height in CSS

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

Answer 2

try using a div tag of that size and putting image inside:

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

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

</div>

or something like that. The div is the full size and the image can only expand to its borders.

Answer 3

You can also use object-fit: scale-down to make image fit a container size if it's too big and leave image size as is if it's smaller than the container.

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

The way I did it:

• When the image is being uploaded I use a server side library to resize if the image is bigger (only). You always resize down, never up.
• Then on the client side I do not set the image size.

The image will be 400x400 only for those images that were exactly that size or bigger.

Answer 5

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

Like so: http://jsfiddle.net/fMuVw/

Answer 6

In JavaScript you can use:

/* 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);