在某些浏览器尺寸下，居中图像显得模糊

问题描述

https://cryptodescriptor.github.io/portfolio/

在Firefox和Chrome中，我的图像呈现良好： https://i.ibb.co/HhTB7DT/good.png

在Edge中，显得模糊： https://i.ibb.co/4P4Tv1r/bad.png

这不是浏览器特定的问题。我也通过在Chrome中重现了image元素的max-height属性来重现它。我能够在Edge中轻松生成此图片的唯一原因是，它出现在特定的浏览器尺寸上，显然Edge对我来说是复制它的理想尺寸（1920x967）。对于不同的浏览器来说，它似乎发生在不同的维度上，这可能都是无关紧要的信息，但我想无论如何我都会将其包括在内。

.scaling-img {
  image-rendering: -webkit-optimize-contrast;
  max-height: 100%; /* By changing this.. */
  max-width: 100%;
}

仅当图像水平对齐时出现，垂直似乎无关紧要。

#welcome-section {
  padding-top: 60px;
  height: calc(100% - 60px);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scaling-img {
  image-rendering: -webkit-optimize-contrast;
  max-height: 100%;
  max-width: 100%;
}

我尝试使用不同的方法进行对齐，但同样的事情发生了。因此，flexBox也不是问题！

完整的CSS来源： https://raw.githubusercontent.com/cryptodescriptor/portfolio/master/main.css

有人可以帮我找出造成此模糊问题的原因吗！预先感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

blurry html rendering rendering