Javascript how to set my own img width and height (resize)

Question

Im using this javascript code to show selected image to upload:

    var input = document.getElementById("images"), 
    formdata = false;

function showUploadedItem (source) {
    var list = document.getElementById("image-list"),
        li   = document.createElement("li"),
        img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
    list.appendChild(li);
}

HTML:

 <span class="span4">
   <div id="response"></div>
   <ul id="image-list">
   </ul>
 </span>

How can I edit the code so the image selected and is showed is showed with 400px insted of orginal size. Example:

Thanks!

Can you expand on the meaning of *`(resize)`* in Q title? – Roko C. Buljan Apr 24 '16 at 19:36 — Roko C. Buljan, Apr 24 '16 at 19:36

score 9 · Accepted Answer · answered Apr 24 '16 at 19:39

9

You can say:

img.style.width = "400px";
img.style.height = "400px";

answered Apr 24 '16 at 19:39

Petr Gazarov

3,602
2
20
37

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

CSS:

#image-list img{
   height: 400px;
   width: auto;
}

if you really want to physically resize your image... than if your image is on your server you could send it to canvas, perform a resize and serve it as base64 encoded string...

Interesting reading: How to Preview Image, get file size, image height and width before upload?

edited May 23 '17 at 12:02

Community

1
1

answered Apr 24 '16 at 19:39

Roko C. Buljan

196,159
39
305
313

score 0 · Answer 3 · answered Apr 04 '19 at 06:42

0

You can use style to set width and height in %:

img.style.width="100%";

answered Apr 04 '19 at 06:42

Ajay Venkata Raju

1,098
12
22

score -1 · Answer 4 · answered Apr 24 '16 at 19:40

-1

You could also add a css class (resize) to this images

img.resize{
    width:540px; /* you can use % */
    height: auto;
}

answered Apr 24 '16 at 19:40

Nicholas

3,529
2
23
31

score -1 · Answer 5 · answered Apr 24 '16 at 19:42

-1

By including the lines...

img.style.width='400px';

img.style.height='400px';

Or whatever size you wanted.

answered Apr 24 '16 at 19:42

user6245342

108
3

1

Probably the one who noticed this answer already existed http://stackoverflow.com/a/36828004/383904 – Roko C. Buljan Apr 24 '16 at 19:47

score -2 · Answer 6 · answered Apr 24 '16 at 19:37

-2

After the creation of your object img, you can use something like:

img.width = "400";
img.height = "400";

answered Apr 24 '16 at 19:37

Rodrigo Juarez

873
1
7
17

This doesn't work without chaining `style` onto element. – Petr Gazarov Apr 24 '16 at 19:42

Javascript how to set my own img width and height (resize)

6 Answers6