在 JS 中创建 img 时，如何在 JS 中设置它的容器大小？

Question

我在我的 JavaScript 文件中设置了一个 img 标签附加到它的包装标签，.wrapper，我想要 .wrapper的宽高要设置为img里面的宽高，在JS中创建的，但是这并没有发生我不知道为什么，我知道我可以在 CSS 中给出这些尺寸，但我的目标是使用 JS 并通过读取创建的 img 的尺寸来动态地做到这一点。

有人可以帮我吗？

function main() {

    let imgWrapper = document.getElementsByClassName("wrapper").item(0) ;

    let image = document.createElement("img") ;


    image.src = "https://i.stack.imgur.com/XFRNl.png" ;

    imgWrapper.appendChild(image) ;

    imgWrapper.style.width = image.style.width ;

    imgWrapper.style.height = image.style.height ;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container{
            height: auto;
            /*background-color: #121212;*/
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrapper{
            background-color: blueviolet;
            position: relative;
        }
        .wrapper img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body onload="main()">
<div class="container">
    <div class="wrapper">
    </div>
</div>
</body>
</html>

Answer 1

你不能像那样提取图像的宽度和高度。您可以使用 naturalWidth 和 naturalHeight 属性来获取照片的宽度和高度，而不是 css 样式。您也可能认为这些值是整数，因此您必须添加一个 px 或您需要的任何大小。

试试运行这个代码，它对我有用：

function main() {

    let imgWrapper = document.getElementsByClassName("wrapper")[0];

    let image = document.createElement("img") ;


    image.src = "https://i.stack.imgur.com/XFRNl.png" ;
    imgWrapper.style.width = image.naturalWidth  + "px";

    imgWrapper.style.height = image.naturalHeight + "px";

    imgWrapper.appendChild(image) ;
    
}

Answer 2

需要等待图片加载完成后才能给父级设置宽高div。

此外，image.width & image.height 是数字，但 div 样式需要 <value>px 格式，所以我们不能直接分配它。

function main() {
    let imgWrapper = document.getElementsByClassName("wrapper").item(0) ;

    let image = document.createElement("img") ;
    image.src = "https://i.stack.imgur.com/XFRNl.png" ;    
    image.addEventListener('load', function() {
      imgWrapper.style.width = image.width + 'px';
      imgWrapper.style.height = image.height + 'px';
    }, false);
    
    imgWrapper.appendChild(image);
}

* {
    margin: 0;
    padding: 0;
}
.container{
    height: auto;
    /*background-color: #121212;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper{
    background-color: blueviolet;
    position: relative;
}
.wrapper img{
    position: absolute;
    left: 0;
    top: 0;
}

<body onload="main()">
  <div class="container">
      <div class="wrapper">
      </div>
  </div>
</body>

在 JS 中创建 img 时，如何在 JS 中设置它的容器大小？

While creating img in JS, how can I set it's container size in JS?

javascript

height

width