Javascript, как настроить свою собственную ширину IMG и высоту (размер)

Question

Im используя этот яваскрипта кода, чтобы показать выбранное изображение для загрузки:

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> 

Как я могу изменить код поэтому изображение, выбранное и показанное, показано с 400px insted оригинального размера. Пример:

Спасибо!

Answer 1

Вы можете сказать:

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

Answer 2

После создания вашего объекта IMG, вы можете использовать что-то вроде:

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

Answer 3

CSS:

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

, если вы действительно хотите, чтобы физически изменить размер изображения ... чем если изображение на вашем сервере вы можете отправить его на холст, выполнить размер и подавать его как base64 закодированная строка ...

Интересное чтение: How to Preview Image, get file size, image height and width before upload?

Answer 4

Можно также добавить класс CSS (изменить размер) этой картинки

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

Answer 5

Включив линии ...

img.style.width='400px'; 

img.style.height='400px'; 

Или какой бы размер вы ни хотели.