gpt4 book ai didi

css - 元视口(viewport)(固定宽度)在具有背景颜色的透明图像上导致不需要的边框

转载 作者:行者123 更新时间:2023-11-28 19:26:12 24 4
gpt4 key购买 nike

请注意,在运行以下所有代码段时,要全面了解问题:请在移动 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 查看出现的不需要的边框

enter image description here

问题:为什么会出现这种情况,如何使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com