时间戳

首页 > 解决方案 > Windows 比例为 125% 时图像上的白线

html - Windows 比例为 125% 时图像上的白线

问题描述

我有一个具体的问题。一个网站有一个带有 5px 实线边框的图像，当我将 Windows 缩放设置更改为 125% 时，我看到图像和边框之间有一条空线。

在此处输入图像描述

在此处输入图像描述

img {
  border: 5px solid red;
}
<img src="https://via.placeholder.com/290x140/000000/FFFFFF/?text=IPaddress.net">

我正在 Google Chrome v91 上对其进行测试。看起来 Chrome 在缩放/缩放时存在子像素问题。

我还注意到，这条白线实际上是图像的背景颜色，其中白色可能是默认颜色。

我尝试了很多设置，但没有任何效果。需要帮忙。

标签： htmlcssimagegoogle-chromescaling

解决方案

您可以尝试将图像放在 div 中，并将其设置为 100%，如下所示：

img {
  border: 5px solid red;
}

#image {
  width: 100%;
  height: 100%;
}
<div id=”image”&gt;
    <img src="https://via.placeholder.com/290x140/000000/FFFFFF/?text=IPaddress.net">
</div>

让我知道它是否有效。如果要设置图像的大小，请更改 div 的大小。

推荐阅读