javascript - 使用 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">