Reputation: 97
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;
}
}
Image:
Upvotes: 3
Views: 2361
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
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