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可以解决问题。

摆脱Chrome中图像的奇怪盒子

1 个答案: