如何将第二个div中的图片尺寸设置为第一个div图片的一半？

这里有几种可行的方案来实现第二个div内图片自动匹配第一个div图片宽度一半的需求，按推荐程度排序：

这种方法不需要JavaScript，直接在CSS中建立两个元素的宽度关联，维护起来更简洁。

你只需要用CSS变量存储第一个图片的宽度，然后让第二个图片引用这个变量并取一半值：

.first-div img {
  --img-width: 500px; /* 这个数值可以随时修改，后续也能通过JS动态更新 */
  width: var(--img-width);
}

.second-div img {
  width: calc(var(--img-width) / 2);
}

之后不管你把--img-width改成什么值（比如200px），第二个图片都会自动变成100px，完美适配第一个图片的随机尺寸。

如果第一个图片的宽度是由父容器决定的（比如响应式场景），可以把变量定义在父容器上，让图片自适应容器：

.first-div {
  --container-width: 500px;
  width: var(--container-width);
}
.first-div img {
  width: 100%;
}
.second-div img {
  width: calc(var(--container-width) / 2);
}

如果第一个图片的宽度完全不可预知（比如来自第三方资源、动态计算的尺寸），可以用JS监听图片加载完成事件，获取实际宽度后再设置第二个图片的尺寸：

document.addEventListener('DOMContentLoaded', function() {
  const firstImg = document.querySelector('.first-div img');
  const secondImg = document.querySelector('.second-div img');

  // 确保图片加载完成后再获取宽度，避免拿到错误值
  firstImg.onload = function() {
    const firstWidth = firstImg.offsetWidth;
    secondImg.style.width = `${firstWidth / 2}px`;
  };

  // 处理图片已缓存的情况，手动触发加载完成事件
  if (firstImg.complete) {
    firstImg.onload();
  }
});

这种方案能应对所有动态场景，哪怕第一个图片的宽度被其他脚本修改，只要重新触发逻辑就能同步更新第二个图片的尺寸。

如果两个div处于同一个布局容器中，用Grid或Flex的比例特性也能轻松实现2:1的宽度关系：

以Grid为例，代码如下：

.image-container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 第一列宽度是第二列的2倍 */
}
.first-div img, .second-div img {
  width: 100%;
  height: auto; /* 保持图片比例 */
}

然后调整HTML结构，把两个div放到容器里：

<div class="image-container">
  <div class="first-div">
    <img src="https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg" />
  </div>
  <div class="second-div">
    <img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" />
  </div>
</div>

这种方案适合需要让两个图片跟随容器宽度自适应，且始终保持2:1比例的场景。

内容的提问来源于stack exchange，提问作者John