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

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

本文关键字：高度 调整 自己的 何设置 设置 Javascript 我自己 img      更新时间：2023-09-26

我使用此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>

如何编辑代码，以便选择和显示的图像以 400px 而不是原始大小显示。例：

谢谢！

你可以

说：

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

CSS：

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

如果您真的想在物理上调整图像大小...如果您的图像在您的服务器上，您可以将其发送到画布，执行调整大小并将其作为 base64 编码字符串提供......

有趣的阅读： 如何在上传前预览图像，获取文件大小，图像高度和宽度？

您可以使用样式在 % 中设置宽度和高度：

img.style.width="100%";

您还可以为此图像添加 css 类（调整大小）

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

通过包含行...

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

或者您想要的任何尺寸。

创建对象 img 后，您可以使用如下内容： 

img.width = "400";
img.height = "400";
相关文章：