在 Chrome 中删除图像上的奇怪框

Question

我在 Chrome 中的图像周围出现了一个奇怪的框。这里有一个例子：http://ulrikhogrebe.com/projects/bbcme.html - 如果你在 chrome 中打开它并查看 header 图像（黑白）下的第一张图像，你会看到它周围有一个边框（如果你错过了，请缩放你的浏览器）。试过的边界：0； - 但似乎无法松开它。此外，它在 Firefox 中也很好。

有什么想法吗？

Answer 1

那是因为您的 img 标签没有 src。您将无法使用 CSS.

删除此边框

解决此问题的唯一方法是正确使用 img 标签。您目前正在标签上设置背景图片，而不是像使用 src 属性设计的那样使用它。

您当前的代码..

<img class="article__img article__img--full" src="" alt="">

.page--bbcme .article__img--full {
  ...
  background: url("../img/bbcme/bbcme2_784.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  ...
}

正确用法...

<img class="article__img article__img--full" src="../img/bbcme/bbcme2_784.jpg" alt="Image description">

如果您出于某种原因需要使用带有背景图像的 img，您可以使用透明图像作为来源。 1px x 1px 透明 gif 或 png 就可以了。

在 Chrome 中删除图像上的奇怪框

Get rid of a weird box on images in Chrome

image

css

google-chrome

border

border-box