Когда я визуально масштабирую изображение, Firefox 3 размывает его. Firefox 2 и другие браузеры этого не делают, это поведение, которое я ожидаю. Это особенно неудобно для создания веб-игры с использованием спрайтов png или gif.
Например, при показе изображения 100x100 в Firefox 3, например:
<img src="sprite.gif" width="200" />
или
<img src="sprite.gif" style="width:200px; height:200px;" />
он выглядит размытым в FF3, а не в IE.
Любые идеи о том, как предотвратить это?
Я обнаружил эту новую функцию FireFox:
http://developer.mozilla.org/En/CSS/Image-rendering
Итак, помещаем это в ваш CSS, исправим его:
image-rendering: -moz-crisp-edges;
Думаю, я бы поделился этой информацией. Извините за ответ на мой собственный вопрос;)
Мне было просто интересно об этом, но, похоже, он жестко закодирован в ff3:( http://forums.mozillazine.org/viewtopic.php?f=7&t=752735&p=5008845
ff2 не выполнял никакой интерполяции
IE по умолчанию не работает, но вы можете включить его: http://www.joelonsoftware.com/items/2008/12/22.html
Вы масштабируете изображение по сравнению с его первоначальным размером - желаемый эффект обычно имеет плавное масштабирование, и, похоже, FFX3 начал делать это (я предполагаю билинейную фильтрацию). Я думаю, что если вы посмотрите на Safari и Opera, вы обнаружите, что они также фильтруют изображение.
http://developer.mozilla.org/En/CSS/Image-rendering применяется только к текущим строкам сборных боксов Firefox (Minefield/3.6a1pre/Gecko 1.9.2). Эта функция не в Firefox 3.0 и не будет в предстоящей версии 3.5. Первый выпуск с этой опцией станет следующей крупной версией после 3,5 в настоящее время на ранних этапах планирования с предполагаемым выпуском в 2010 году.
Internet Explorer 8 также "размывает" изображения по умолчанию при масштабировании. На самом деле это хорошо. Большинство изображений выглядят лучше при масштабировании с использованием бикубической выборки вместо выборки ближайших соседей.
Если вы хотите, чтобы Internet Explorer 8 масштабировал изображения, как в предыдущих версиях, поместите это в свой CSS:
-ms-interpolation-mode: nearest-neighbor;
Если вы хотите, чтобы Internet Explorer 7 масштабировал изображения, такие как IE 8, используйте это:
-ms-interpolation-mode: bicubic;
Помимо внешнего вида изображения, вы также должны учитывать производительность. Я обнаружил, что IE 7 и IE 8 требуют значительно большей мощности процессора для масштабирования изображений при использовании бикубической выборки, чем Firefox 3.6.
Я действительно предпочитаю, как это делает FF, поскольку он использует интерполяцию при масштабировании изображений, в большинстве случаев это делает изображения намного лучше, чем в IE. Однако я предполагаю, что могут быть случаи, когда это не хорошо, например, при использовании спрайтов.
Я не думаю, что есть способ обойти это, хотя.
К сожалению, у меня нет решения для этого, но это полный разборщик для большого числа пользователей (например, художников-пикселов). Если вас это затронуло, пожалуйста, отправьте отзыв на http://hendrix.mozilla.org/ и проголосуйте за соответствующая ошибка.
Неутешительно, что Mozilla игнорирует эту проблему. Для многих затронутых пользователей это означает, что нет другого выбора, кроме как переключать браузеры. IE имеет свойство CSS, чтобы выбрать фильтр изменения размера, поэтому это, по-видимому, лучший выбор.
Интересно, если бы вы получили лучшие результаты, если бы создали спрайты в наибольшем размере, который вы ожидаете от них, и затем масштабируете их по мере необходимости?
Вам следует избегать масштабирования изображения на стороне клиента. Масштабирование изображения вверх подобно масштабированию, браузер не имеет информации для изображения, чтобы отображать его в более высоком разрешении, чем на самом деле, поэтому вы не можете этого сделать, не замаскивая изображение, возможно, он не заметил, что в IE, попробуйте изменяя 200px до 400px.