Не размыть изображения при увеличении

Это не тот ответ, который даст один правильный ответ, но я все равно спрошу:

Можно ли увеличить или увеличить изображение, чтобы оно не размылось?

Например, этого не должно происходить, пиксели не должны размываться друг на друга, а должны увеличиваться с увеличенными пикселями блока. Есть ли что-то вроде maginification: block; или что-то подобное в CSS или HTML или, может быть, JS polyfill?

Источник

2 ответа

Решение
image-rendering: pixelated;

Но это еще не поддерживается:

https://developer.mozilla.org/en-US/docs/CSS/image-rendering

в настоящее время они работают, но только для уменьшения масштаба:

    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
Источник

Это зависит от разрешения изображения. Если вы увеличите изображение больше, чем разрешение, оно будет размыто. Одним из способов решения этой проблемы является использование очень большого изображения, но отображение его в виде меньшего изображения. Поэтому, когда вы увеличиваете масштаб, он сохраняет свое качество (до определенного момента). Это демонстрационное шоу jQuery - вот что я пытаюсь объяснить:

http://webdesignfan.com/demos/imagezoom.html - размер изображения: 640x511

http://webdesignfan.com/demos/image.jpg - фактический размер изображения: 1712x1368

В этом примере можно увеличить изображение более чем в 2,5 раза, не размывая.

Надеюсь это поможет. Благодарю.

Источник
Другие вопросы по тегам