How to set image Width/Height

Question

I have what I think is very simple code and I expect it to modify the img width/height but it is not working.

I use createObjectURL, then get the width/height of that image. Then, I will calculate the width/height so that I can create a thumbnail in the proper proportion (not distort the original image but just make it smaller). For now, I am just hard-coding values to see if it works, but it does not.

Then, I load the image with the new values.

But it does not change the original height/width that I set for the img in the css.

A fiddle is here:

All, help, as always is appreciated. Belows is the relevant block of code. The id="fileDisplay" is the container. The background url will be a "loading" image. id="imgDisaply" is the img component where the image gets loaded, which covers up the "loading" background. It was the only way I could figure out how to give a "loading" image as feedback to the user as the image loads.

imgSrc = window.URL.createObjectURL(this.files[0]);
getImgSize(imgSrc);
document.getElementById("imgDisplay" + justNumber).width="500";
document.getElementById("imgDisplay" + justNumber).height="200";
document.getElementById("imgDisplay" + justNumber).src = imgSrc;

Answer 1

You are missing the '.style' and specification of size attr (px, em, etc.).

I believe this may be what you were going for:

imgSrc = window.URL.createObjectURL(this.files[0]);
getImgSize(imgSrc);
document.getElementById("imgDisplay" + justNumber).style.width="500px";
document.getElementById("imgDisplay" + justNumber).style.height="200px";
document.getElementById("imgDisplay" + justNumber).src = imgSrc;

Answer 2

In DOM, you need to use .style to mention styles.

document.getElementById("imgDisplay" + justNumber).style.width="500";
document.getElementById("imgDisplay" + justNumber).style.height="200";

Answer 3

Ok so here is an image taken from a source and a alert message show us her width and height hope this snippet can help you:

 var image = document.createElement('img'); var image_url = "https://images-na.ssl-images-amazon.com/images/G/01/img15/other-services/billboard/29597_os_int_fr_showcase_1500x300._CB288675343_.jpg"; image.src = image_url; image.onload = function() { alert("width : " +image.width+ " px"); alert("height : " +image.height+ " px"); } 

Hope it help

Answer 4

Either ways of setting width/height is somehow correct. Both of them do work, but in different ways.

document.getElementById("imgId").style.width="500px";

results in an img with inline style attribute:

<img src="..." style="width: 500px" />

While document.getElementById("imgId").setAttribute("width", "500"); creates an img with width attribute(no px at the end):

<img src="..." width="500" />