使用 Javascript 获取图像尺寸并将其应用于任何其他元素？

Question

我已经尝试过了，但它不起作用，我怎么能让它工作，#sky2 获得与#sky 相同的高度和宽度？我可能会将#sky2 更改为 div 或其他内容。function ImgWH() {  var mImg = document.querySelector("#sky");  var mWidth = mImg.clientWidth;  var mHeight = mImg.clientHeight;  document.getElementById("sky2").style.width = mWidth;}#sky {  height: 50vh;  width: 100%;}<img src="https://picsum.photos/300/150" id="sky"><img src="https://picsum.photos/300/150" id="sky2">

Answer 1

好吧，首先你必须调用你的函数，但是当它运行时，你必须记得在你设置的值上添加一个度量单位，否则不知道元素的宽度。

function ImgWH() {

  var mImg = document.getElementById("sky");

  var mWidth = mImg.clientWidth;

  var mHeight = mImg.clientHeight;

  document.getElementById("sky2").style.width = mWidth + "px"; // <-- must add unit

}

ImgWH();  // <-- Remember to invoke your function

#sky {

  height: 50vh;

  width: 100%;

}

<img src="https://picsum.photos/300/150" id="sky">

<img src="https://picsum.photos/300/150" id="sky2">

Answer 2

从第一张图片获取宽度并将其设置为第二张图片的宽度（注意“px”是必需的）并且不要忘记启动该功能。

function ImgWH() {

    var myImg = document.getElementById("sky");

    var myImg2 = document.getElementById("sky2");

    var mWidth = myImg.width;

    var mHeight = myImg.clientHeight;

    myImg2.style.width = mWidth +'px';

}

ImgWH();

#sky {

  height: 50vh;

  width: 100%;

}

<img src="https://picsum.photos/300/150" id="sky">

<img src="https://picsum.photos/300/150" id="sky2">