CODEWITHSUNDEEP
htmlcssborder
Bogdan Morozov
Bogdan Morozov

Reputation: 97

1px border issue for img

So I am having an issue with 1px border for img. They have a strange distance between them and it becomes even worse when scaling (see codepen). I don’t have any idea where it is coming from and how to fix it.

My 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>

My 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

Image:

enter image description here

Upvotes: 3

Views: 2361

Answers (2)

Rysicin
Rysicin

Reputation: 95

I just stumbled upon the same issue with my image:

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

The fix was to add 1px more of width and box-sizing: border-box;, since without this 1 more pixel, the border didn't stick to the left instead of the right. Really peculiar behavior.

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

Upvotes: 0

Danielius
Danielius

Reputation: 837

This time I fixed your problem by changing a part of your code to this:

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

I hope it will work for you! Maybe there is a better way, because in this case the border is placed on the edge of the image, but I do not know the other way.

Upvotes: 1

Related Questions