Javascript如何设置我自己的img宽度和高度（调整大小）答案

【问题标题】：Javascript how to set my own img width and height (resize)Javascript如何设置我自己的img宽度和高度（调整大小）
【发布时间】：2019-04-04 14:42:13
【问题描述】：

我正在使用此 javascript 代码显示要上传的选定图像：

    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>

如何编辑代码，以便选择和显示的图像以 400 像素的原始尺寸显示。示例：

谢谢！

【问题讨论】：

Q题中(resize)的意思能展开吗？

标签： javascript jquery html image

【解决方案1】：

你可以说：

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

【讨论】：

【解决方案2】：

CSS：

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

如果你真的想调整你的图片大小......如果你的图片在你的服务器上，你可以将它发送到 canvas，执行调整大小并将其作为 base64 strong> 编码字符串...

有趣的阅读：How to Preview Image, get file size, image height and width before upload?

【讨论】：

【解决方案3】：

您可以使用样式来设置宽度和高度，以%为单位：

img.style.width="100%";

【讨论】：

【解决方案4】：

您还可以为这些图片添加一个 css 类（调整大小）

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

【讨论】：

【解决方案5】：

通过包含线条...

img.style.width='400px';

img.style.height='400px';

或者你想要的任何尺寸。

【讨论】：

可能注意到这个答案的人已经存在stackoverflow.com/a/36828004/383904

【解决方案6】：

创建你的对象 img 后，你可以使用类似的东西：

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

【讨论】：

如果不将 style 链接到元素上，这将不起作用。