请注意，在运行以下所有代码段时，要全面了解问题:请在移动 View 上查看(例如，使用 chrome 开发人员工具中的切换设备工具栏功能)。
这个图像很好(没有使用元视口(viewport))
.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">
并在移动设备上查看页面(即让元视口(viewport)启动)
透明图像上的边框开始出现......
这是产生不需要的边框的示例:
.image-not-ok {
background-color: black;
}<html>
<head>
<meta name="viewport" content="width=1440">
</head>
<body>
<img class="image-not-ok" src="https://i.ibb.co/mTPWBWC/shirt.png">
</body>
</html>使用移动 View 查看出现的不需要的边框
问题:为什么会出现这种情况，如何使用 CSS 来防止出现此类边框？
注意:
- 使用 Google Chrome 74.0.3729.131 和 Opera 58.0.3135.132 进行测试(均为移动 View )
- Mozilla 上似乎没有出现该问题(使用 66.0.5 版测试)
最佳答案
问题不在于视口(viewport)标签，它与它没有任何关系。它与浏览器上的渲染有关。问题是图像不能正确地适合图像，因为它会产生类似填充的效果，导致看到背景颜色。 例如，尝试将背景颜色更改为白色，然后看到更多类似边框的效果消失。
关于css - 元视口(viewport)(固定宽度)在具有背景颜色的透明图像上导致不需要的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56123039/