高效可靠的方法将第二张图像的尺寸调整为与第一张图像相同

Question

我在网页中显示了两个图像标签，它们的大小可能不同。由于图像是动态生成的，因此每次加载时两个图像的大小可能不同。我想将第二张图像调整为与第一张图像相同的尺寸。这是我尝试过的：

<img id='1' src='img1.jpg'>
<img id='2' src='img2.jpg'>
<script>
  const img1 = document.getElementById("1");
  const w = img1.offsetWidth;
  const h = img1.offsetHeight;
  const img2= document.getElementById("2");
  img2.style.width = w + 'px';
  img2.style.height = h + 'px';
</script>

我发现有时宽度和高度读为0，这可能是由于在加载第一个图像之前运行的脚本造成的。我正在考虑将

onload()

函数添加到第一个图像中，但是，我认为如果在

onload

被触发时未加载 image2，那么它就不会被调整。

此外，如果浏览器运行缓慢，这种大小变化可能对用户来说是明智的。有什么更有效和可靠的方法可以使两个图像首先以相同的尺寸显示？请注意，我不想将它们都放入固定大小的 div 中，我只希望第二个图像与第一个图像具有相同的大小。

Answer 1

问题是您试图在图像加载之前读取高度和宽度。因此，您得到的值为零。

您需要等到图像加载后才能读取实际值。在第一张图像上为

load

事件添加事件侦听器应该可以解决该问题。

类似这样的：

const img1 = document.getElementById("1");
img1.addEventListener("load", function() {
    const w = img1.offsetWidth;
    const h = img1.offsetHeight;
    const img2= document.getElementById("2");
    img2.style.width = w + 'px';
    img2.style.height = h + 'px';
});

<img id='1' src='https://images.unsplash.com/photo-1725859685127-c723ea1d32a1?'>
<img id='2' src='https://images.unsplash.com/photo-1725859685127-c723ea1d32a1?'>