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;
}