Блог

Главная - Вопросы по программированию - CSS-граница вокруг img имеет пробелы на одном экране, а не на другом

CSS-граница вокруг img имеет пробелы на одном экране, а не на другом

#html #css

#HTML #css

Вопрос:

Вот простой код, который я тестирую

 div {
  background-color: white;
  height: 100%;
  width: 100%;
}

img {
  max-width: 200px;
  border: 5px solid black;
} 
 <div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>

Скрипка: https://jsfiddle.net/xhsngt3q /

На одном мониторе я получаю это

введите описание изображения здесь

На другом есть белая пиксельная граница справа и снизу

введите описание изображения здесь

Любые советы о том, как это удалить?

Комментарии:

1. Это почти всегда уровень масштабирования, когда это происходит. Убедитесь, что для вашего экрана установлен фактический размер в настройках браузера и / или отображения на 100%.

2. @AuthenticScience Я только что проверил, что масштабирование lvl составляет 100% на обоих экранах, но проблема, похоже, возникает и в Chrome, в Firefox она выглядит нормально на обоих мониторах

3. Вы также увеличиваете масштаб в браузере на 100% (CTRL-0 или CMD-0) в Chrome?

4. @user1657533, да, аутентичный прав, я также пытаюсь на своем мониторе, если я устанавливаю масштабирование lvl 100%, это идеально, но если я увеличиваю масштаб на 110%, я показываю правую и нижнюю границы.

Ответ №1:

Я думаю, это вызвано количеством пикселей изображения.

Я бы предложил добавить черный фон к вашему изображению, как следующий CSS-код:

 div {
  background-color: white;
  height: 100%;
  width: 100%;
}

img {
  max-width: 200px;
  border: 5px solid black;
  
  /*My change*/
  background-color: black;
} 
 <div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>

Надеюсь, это может быть полезно. Приветствую.

Ответ №2:

Вы также можете попробовать использовать max-width: 199px или max-width: 202px

 div {
  background-color: white;
  height: 100%;
  width: 100%;
}

img {
/*My change*/
  max-width: 199px;
  border: 5px solid black;
} 
 <div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>

Ответ №3:

Добавьте поле-тень 0 0 0 1px; вместо сплошной границы. Это просто обходной путь, но иногда достаточно хороший.

Ответ №4:

 div {
  background-color: white;
  height: 100%;
  width: 100%;
}

img {
  max-width: 200px;
  border: 4px solid black;
} 
 <div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>

Комментарии:

1. Эй, попробуйте это, я изменил 5 пикселей на 4 пикселя. это работает со всеми типами экранов.

2. Это не решает проблему. Вы можете попробовать, увеличивая и уменьшая масштаб.

Метки: ,