img 的 1px 边框问题

Question

所以我遇到了 img 的 1px 边框问题。它们之间有一个奇怪的距离，并且在缩放时会变得更糟（参见 codepen）。我不知道它来自哪里以及如何修复它。

我的HTML:

<article class="comment">
    <div class="comment__image-block">
      <img class="comment__img" src="https://i.imgur.com/dSEAOsy.jpg" alt="Avatar" title="Avatar">
    </div>
  </article>

我的 SCSS：

 .comment {
  &__image-block {
    padding: 0;
    float: left;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    &:before {
      content: ' ';
      display: block;
      background-color: white;
      width: 60%;
      height: 10px;
      position: absolute;
      right: -11px;
      top: -2px;
      outline: 1px solid red;
      transform: skewX(53deg);
    }
  }
  &__img {
    width: 80px;
    height: 80px;
    border: 1px solid red;
  }
}

CodePen link

图片：

Answer 1

这次我通过将您的部分代码更改为以下内容来解决您的问题：

&__img {
    width: 80px;
    height: 80px;
    border: 1px solid red;
    box-sizing: border-box;
 }

希望对您有用！也许有更好的方法，因为在这种情况下边框放在图像的边缘，但我不知道另一种方法。

Answer 2

我刚刚偶然发现了与我的图像相同的问题：

.overlay-item img {
    width: 568px;
    height: 253px;
    border: 1px solid #555;
}

解决方法是增加 1px 宽度和 box-sizing: border-box;，因为如果没有这 1 个像素，边框不会粘在左边而不是右边。非常奇怪的行为。

.overlay-item img {
    width: 569px;
    height: 253px;
    border: 1px solid #555;
    box-sizing: border-box;
}

img 的 1px 边框问题

1px border issue for img

html

css

border