将 <img> 的（响应）高度设置为另一个 <img> 的高度答案

【问题标题】：Set (responsive) height of <img> = to height of another <img>将 <img> 的（响应）高度设置为另一个 <img> 的高度
【发布时间】：2020-03-23 09:23:35
【问题描述】：

我有一个图像 id="img1" 和 "width=100%;height:auto"。另一个图像 id="img2" ... 在几乎不相关的父母中，需要固定宽度但与 img1 相同的高度。

我在这里找到： [Set height of <div> = to height of another <div> through .css 那：

如果您愿意使用 javascript，那么您可以在像这样的元素： document.GetElementByID('rightdiv').style.getPropertyValue('max-height');

您可以像这样在元素上设置属性： .setAttribute('style','max-height:'+heightVariable+';');

所以我尝试了：

var imgHeight = GetElementByID('img1').style.getPropertyValue('height');
.setAttribute('style','height:'+imgheight+'px';');

第一个问题是如何让它工作。其次，当访问者调整/旋转他们的设备时，它会调整大小吗？

【问题讨论】：

将其添加到“准备好文档”和“调整窗口大小”
GetElementByID 应该是 getElementById 并且应该以 document. 开头。 .setAttribute 将不起作用，因为您关闭了变量：;。另外，不，它不会在调整大小时调整。您必须为窗口调整大小创建一个事件处理程序并将代码放入其中以使其工作。

标签： javascript css

【解决方案1】：

您需要以与获取第一个元素类似的方式获取第二个元素，然后才能对其应用setAttribute。但是，您需要在 getElementById 函数之前添加 document。

另外，请注意GetElementByID 将不起作用。引用自official docs：

此方法名称中“Id”的大小写必须正确让代码发挥作用； getElementByID() 无效且不会工作，无论它看起来多么自然。

也可以更简单地编写图像的height，只需使用.height 而不是您的原始代码。

要让它在用户调整窗口大小时调整大小，请将所有代码放在一个函数中，然后添加两个事件侦听器，一个在加载页面时触发，另一个在调整大小时触发。

完整代码如下：

window.addEventListener("load", resizeImage);
window.addEventListener("resize", resizeImage);

function resizeImage(){
   var imgHeight = document.getElementById('img1').height;
   document.getElementById('img2').height = imgHeight;
}

【讨论】：