Question

此图像很好（不使用元视口）

.image-ok {
  height: 300px;
  width: 300px;
  background-color: purple;
}

<html>

  <body>
    <img class="image-ok" src="https://i.ibb.co/mTPWBWC/shirt.png">
  </body>

</html>

但是，当我使用代码<meta name="viewport" content="width=1440">
时 并在移动视图中查看了页面（即，让元视口进入）
透明图像上的边框开始出现...

这是link页面的透明图像：
http://e-sports.cool/tests/meta-viewport-transparent-img.html

使用移动视图查看不需要的边框

问题：为什么会发生这种情况，如何使用CSS防止出现此类边界？

注意：

使用Google Chrome 74.0.3729.131和Opera 58.0.3135.132（均为移动视图）进行了测试
在Mozilla上似乎不会发生此问题（使用66.0.5版进行了测试）

Answer 1

问题不在于视口标签，它与它无关。它与浏览器上的渲染有关。问题是，通过给其类似填充的效果（导致看到背景色），图像无法正确地适合图像。 例如，尝试将背景颜色更改为白色，然后看到更多类似边框的效果消失。

Answer 2

我已使用以下方法解决此问题：

我将图片包装在inline-block元素中
在该包装上，我分配了以下CSS属性：

.image-wrapper {
    display: inline-block;
    overflow: hidden;
    backface-visibility: hidden;
}

在图像元素上，我对其进行了一些缩放，以使边框不会出现

.image-ok {
    background-color: black;
    transform: scale(1.02);
}

.image-wrapper {
  display: inline-block;
  overflow: hidden;
  backface-visibility: hidden;
}

.image-ok {
  background-color: black;
  transform: scale(1.02);
}

<div class="image-wrapper">
  <img class="image-ok" src="https://i.ibb.co/mTPWBWC/shirt.png">
</div>

元视口（固定宽度）在具有背景色的透明图像上造成不必要的边框

2 个答案: