时间戳

首页 > 解决方案 > 在 JS 中创建 img 时，如何在 JS 中设置它的容器大小？

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

问题描述

我已经img在我的 JavaScript 文件中设置了一个标签，以附加到它的包装标签，.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>

标签： javascriptheightwidth

解决方案

你不能像那样提取图像的宽度和高度。您可以使用naturalWidthandnaturalHeight属性来获取照片的宽度和高度，而不是 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) ;
    
}

推荐阅读