为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

繁星淼淼 2023-01-06 10:57:52

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


查看完整描述

2 回答

?
跃然一笑

TA贡献1566条经验 获得超6个赞

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


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


查看完整回答
反对 回复 2023-01-06
?
当年话下

TA贡献1626条经验 获得超9个赞

从第一张图片获取宽度并将其设置为第二张图片的宽度(注意“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">


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信