image - 摆脱 Chrome 中图像上的奇怪框

Question

我在 Chrome 中的图像周围出现了一个奇怪的框。这里有一个例子：http: //ulrikhogrebe.com/projects/bbcme.html - 如果你在 chrome 中打开它，并查看标题图像下的第一张图像（黑色和白色），你会看到它周围有一个边框（如果您错过了，请缩放您的浏览器）。尝试边界：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 就可以了。