如何修复随屏幕宽度变化的图片列表subpixel rendering随机1px间隙

问题背景 #

三张等比例图片上下排列，宽度设为100%，在移动端或页面缩放时，图片间随机出现1px黑色间隙（容器背景为黑色）。该问题由子像素渲染导致：浏览器计算图片高度时产生浮点数，取整后与容器高度不匹配，露出背景色间隙。尝试过object-fit、flex、grid、display:block、border-box等方案均无效，margin-bottom:-1px会导致切片图片拼接错位，手动增加图片高度效果不稳定。

可行解决方案 #

方案1：硬件加速规避子像素取整误差

给图片添加transform: translateZ(0)触发GPU硬件加速，让浏览器以更精确的方式渲染图片边缘，避免子像素间隙：

.imageWrapper img {
  width: 100%;
  display: block;
  transform: translateZ(0);
  /* 可选：提前告知浏览器优化方向，提升渲染稳定性 */
  will-change: transform;
}

方案2：动态计算整数高度（切片图片首选）

通过JS计算图片的精确高度并取整，确保高度无浮点数，彻底避免间隙同时保证切片拼接准确：

const imageWrappers = document.querySelectorAll('.imageWrapper');

imageWrappers.forEach(wrapper => {
  const img = wrapper.querySelector('img');
  
  // 图片加载完成后计算初始高度
  img.onload = calculateImageHeight;
  // 窗口大小变化时重新计算
  window.addEventListener('resize', calculateImageHeight);

  function calculateImageHeight() {
    const ratio = img.naturalHeight / img.naturalWidth;
    const containerWidth = wrapper.offsetWidth;
    // 计算高度并取整，消除浮点数误差
    const exactHeight = Math.round(containerWidth * ratio);
    img.style.height = `${exactHeight}px`;
  }
});

方案3：容器溢出隐藏+高度微调（极简hack）

给图片容器设置overflow: hidden，图片高度增加1px并超出容器，隐藏超出部分，既消除间隙又不影响切片拼接：

.imageWrapper {
  overflow: hidden;
}
.imageWrapper img {
  width: 100%;
  display: block;
  height: calc(100% + 1px);
}

原理是让图片底部多出来的1px被容器裁剪，刚好覆盖可能出现的间隙，同时因为切片图片比例一致，不会产生拼接错位。

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