Проблема с границей 1px для img
Итак, у меня проблема с границей 1px для img. Между ними странное расстояние, и оно становится еще хуже при масштабировании (см. Код). Я понятия не имею, откуда это и как это исправить.
Мой 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;
}
}
Изображение:
Ответы 2
На этот раз я исправил вашу проблему, изменив часть вашего кода на это:
&__img {
width: 80px;
height: 80px;
border: 1px solid red;
box-sizing: border-box;
}
Надеюсь, у вас это сработает! Может быть, есть способ получше, потому что в этом случае граница ставится по краю изображения, но другого пути я не знаю.
Спасибо за ваш ответ, но, к сожалению, это не помогает, проблема все еще присутствует даже с box-sizing: border-box;
@BogdanMorozov, это странно, как по мне, это работает, по крайней мере, в вашем примере кода и с использованием google chrome ...
Какой браузер вы используете? В Chrome проблема решена. В Firefox даже не было проблем (по крайней мере, для меня).
В Microsoft Edge у меня тоже проблема решена.
Последняя версия хрома
@BogdanMorozov Может это кеш? Сомневаюсь, но кто знает? Попробуй его очистить.
Я только что наткнулся на ту же проблему с моим изображением:
.overlay-item img {
width: 568px;
height: 253px;
border: 1px solid #555;
}
Исправление заключалось в добавлении 1px большей ширины и box-sizing: border-box;, поскольку без этого еще одного пикселя граница не держалась слева, а не справа. Действительно своеобразное поведение.
.overlay-item img {
width: 569px;
height: 253px;
border: 1px solid #555;
box-sizing: border-box;
}
удалить
content: ' ';из&:before