Метапорт (фиксированная ширина), приводящий к появлению нежелательных границ на прозрачном изображении с фоновым цветом - PullRequest
Новая
       8

Метапорт (фиксированная ширина), приводящий к появлению нежелательных границ на прозрачном изображении с фоновым цветом

1 голос
/ 14 мая 2019

Это изображение в порядке (без использования метапортпорта) 

.image-ok {
  height: 300px;
  width: 300px;
  background-color: purple;
}
<html>

  <body>
    <img class="image-ok" src="https://i.ibb.co/mTPWBWC/shirt.png">
  </body>

</html>


Однако, когда я использовал код <meta name="viewport" content="width=1440">
и просматривал страницу в мобильном представлении (т. Е. Пусть мета-окно включается)
начинают появляться границы прозрачного изображения ...

Вот ссылка на страницу с прозрачным изображением:
http://e -sports.cool / tests / meta-viewport-transparent-img.html

Использование мобильного представления для отображения появления нежелательных границ

Вопрос: Почему это происходит и как я могу использовать CSS для предотвращения появления таких границ?

Примечание:

  • Протестировано с помощью GoogleChrome 74.0.3729.131 и Opera 58.0.3135.132 (для мобильных устройств)
  • Похоже, что проблема не возникает в Mozilla (протестировано с использованием версии 66.0.5)

1 Ответ

0 голосов
/ 14 мая 2019

Проблема не в теге viewport, он не имеет к этому никакого отношения.Это связано с рендерингом в браузере.Дело в том, что изображение не подходит к изображению правильно, давая эффект заполнения, который заставляет видеть цвет фона. Например, попробуйте изменить цвет фона на белый и увидеть исчезновение более похожих на границы эффектов.

...