Question

我有一个图像ID =“ img1”，宽度为100％；高度：自动。另一张图片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';');

第一个问题是如何使其工作。其次，访问者调整/旋转设备的尺寸是否会调整大小？

Answer 1

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

另外，请注意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;
}

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

1 个答案: