Большие изображения не отображаются в Chrome?

Очень большие изображения не будут отображаться в Google Chrome (хотя полосы прокрутки будут вести себя так, как если бы изображение присутствовало). Одни и те же изображения часто прекрасно отображаются в других браузерах.

Вот два примера изображений. Если вы используете Google Chrome, вы не увидите длинную красную полосу:

Короткий синий
http://i.stack.imgur.com/ApGfg.png

Длинный красный
http://i.stack.imgur.com/J2eRf.png

Как видите, браузер считает, что есть более длинное изображение, но оно просто не отображается. Формат изображения тоже не имеет значения: я пробовал и PNG, и JPEG. Я также проверил это на двух разных машинах с разными операционными системами (Windows и OSX). Это явно ошибка, но может ли кто-нибудь придумать обходной путь, который заставит Chrome отображать большие изображения?


image google-chrome rendering aspect-ratio
person David Jones    schedule 21.09.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Не то, чтобы кто-то заботился или даже просматривал этот пост, но я нашел странный обходной путь. Проблема, похоже, связана с тем, как Chrome обрабатывает масштабирование. Если вы установите для свойства zoom значение 98,6 % и ниже или 102,6 % и выше, изображение будет отображаться (установка для свойства zoom любого значения между 98,6 % и 102,6 % приведет к сбою визуализации). Обратите внимание, что свойство zoom официально не определено в CSS, поэтому некоторые браузеры могут игнорировать его (что в данном случае хорошо, так как это хак для конкретного браузера). Пока вы не возражаете против небольшого изменения размера изображения, я полагаю, что это может быть лучшим решением.

Короче говоря, следующий код дает желаемый результат, как показано здесь:

<img style="zoom:98.6%" src="http://i.stack.imgur.com/J2eRf.png">


Обновление:

На самом деле, это хорошая возможность убить двух зайцев одним выстрелом. По мере того, как экраны переходят на более высокие разрешения (например, дисплей Apple Retina), веб-разработчики захотят начать показывать изображения в два раза больше, а затем уменьшать их на 50%, как это предлагается здесь. Таким образом, вместо использования свойства zoom, как было предложено выше, вы можете просто удвоить размер изображения и отобразить его вдвое меньше:

<img style="width:50%;height:50%;" src="http://i.stack.imgur.com/J2eRf.png">

Это не только решит вашу проблему рендеринга в Chrome, но и сделает изображение красивым и четким на дисплеях следующего поколения с высоким разрешением.

person David Jones    schedule 21.09.2012
comment
...за счет увеличения пропускной способности в 4 раза для @2x изображений и в 9 раз для @3x изображений. - person Mike Causer; 20.04.2017
comment
@MikeCauser, этому вопросу и ответу 5 лет. Эта ошибка была исправлена, и Chrome теперь правильно отображает эти длинные изображения, и, конечно же, в настоящее время srcset хорошо поддерживается, поэтому вы можете использовать несколько версий изображения для разной плотности пикселей. Я считаю, что причина, по которой у меня возникла эта проблема 5 лет назад, заключалась в том, что я создавал одномерный спрайт значка. Поскольку высота спрайта была очень маленькой, удвоение ширины не имело большого значения с точки зрения размера файла. - person David Jones; 20.04.2017
comment
Извините, я не хотел выкапывать 5-летний ответ. Вчера я столкнулся с ошибкой в ​​последней версии Chrome 57 на старом телефоне с Android 4.1.2, из-за которой спрайт шириной 5000 пикселей в background-image просто не отображался. Перепробовал почти все, чтобы заставить его работать, и наткнулся на ваш ответ. Затем удалось исправить это, добавив zoom: 99.9997%. - person Mike Causer; 21.04.2017
comment
Не беспокойтесь — я на самом деле предполагал, что это было полностью решено, но, по-видимому, это все еще проблема на некоторых устройствах. Хорошо знать! - person David Jones; 21.04.2017