时间戳

首页 > 解决方案 > 使用 Javascript 获取图像尺寸并将其应用于任何其他元素？

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

问题描述

我已经尝试过了，但它不起作用，我怎样才能让它工作，#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">

提前致谢

标签： javascripthtmlcss

解决方案

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

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">

推荐阅读