设置object-fit:contain的图片比新标签页同图轻微模糊怎么解决？

问题根源 #

Chrome内核浏览器对渲染尺寸为非整数像素的图片，默认插值算法会产生轻微柔化效果，你观测到的渲染尺寸带小数点就是模糊的核心诱因。浏览器新标签页打开图片时会自动对齐整数像素渲染，所以清晰度更高。

修复方案 #

1. 替换居中方案，避免非整数像素偏移 #

原代码使用transform: translate(-50%, -50%)居中容器，百分比偏移计算极易产生小数像素位置，修改为flex居中彻底避免该问题：

.modal {
    display: none;
    position: fixed;
    /* 替换原有top/left/transform属性 */
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
    margin: 0;
    padding: 0;
}
.my_slides {
    display: none;
    /* 移除原有top/left/transform属性 */
    padding: 0;
    margin: 0;
    height: 90%;
    width: 90%;
    background-color: gray;
}

2. 新增图片渲染优化属性 #

给弹窗内的图片添加像素对齐和渲染优化属性：

.my_slides img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 新增优化属性 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
}

3. 可选：JS强制整数渲染尺寸 #

如果需要完全消除小数尺寸影响，可在图片加载时动态计算整数宽高：

// 插入到弹窗显示逻辑内，slides[i].style.display = "initial"之后执行
const targetImg = slides[i].querySelector("img");
targetImg.onload = () => {
  const slideContainer = slides[i];
  const containerW = slideContainer.clientWidth;
  const containerH = slideContainer.clientHeight;
  const imgRatio = targetImg.naturalWidth / targetImg.naturalHeight;
  let finalW, finalH;
  if (containerW / containerH > imgRatio) {
    finalH = Math.floor(containerH);
    finalW = Math.floor(finalH * imgRatio);
  } else {
    finalW = Math.floor(containerW);
    finalH = Math.floor(finalW / imgRatio);
  }
  targetImg.style.width = `${finalW}px`;
  targetImg.style.height = `${finalH}px`;
}

修改完成后即可实现弹窗内图片和新标签页打开的原图清晰度一致，且宽高比完全匹配。

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