У меня есть изображение, которое было добавлено на веб-страницу с помощью:

<img src="file:/C:/Documents and settings/administrator/desktop/A.bmp">

Однако, когда я увеличиваю изображение с помощью Firefox, изображение становится размытым - и это плохо, поскольку на изображении есть мелкие детали, которые должны быть четкими. В Microsoft Paint увеличение масштаба изображения делает изображение четким и четким, поэтому есть ли способ сделать это, возможно, с помощью CSS или каким-либо не зависящим от браузера методом? Я слышал о наложении изображений, но не понимаю этого.

|источник

2 ответа2

0

Я вижу, что вы получили свое решение из ответа на этот вопрос суперпользователя. Этот вопрос требует решения для сглаживания изображения, которое происходит, когда вы увеличиваете изображение (растровое изображение), растягивая его за пределы его фактических размеров.

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

Реальное решение вашей проблемы - преобразовать растровое изображение в векторный графический формат, такой как SVG, и включить его в HTML-файл.

Вы можете сделать это вручную, используя программное обеспечение для трассировки, такое как Inkscape или Adobe Illustrator. Вы также можете попробовать автоматическое преобразование с помощью таких программ, как Corel PowerTRACE или Vector Magic. Вы можете увидеть результаты Vector Magic, загрузив свое изображение в их онлайн-инструмент трассировки.

|источник
0

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

<head>
<style>
img { 
image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: optimize-contrast; /* CSS3 Proposed */
    -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
</style>
</head>

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

|источник

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .