CODEWITHSUNDEEP
javascriptjqueryhtmlimage
Chris
Chris

Reputation: 105

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

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!

Upvotes: 7

Views: 8045

Answers (6)

Ajay Venkata Raju
Ajay Venkata Raju

Reputation: 1158

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

img.style.width="100%";

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205997

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?

Upvotes: 0

user6245342
user6245342

Reputation: 108

By including the lines...

img.style.width='400px';

img.style.height='400px';

Or whatever size you wanted.

Upvotes: -1

Nicholas
Nicholas

Reputation: 3784

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

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

Upvotes: -1

Petr Gazarov
Petr Gazarov

Reputation: 3811

You can say:

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

Upvotes: 10

Rodrigo Juarez
Rodrigo Juarez

Reputation: 883

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

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

Upvotes: -2

Related Questions