Search code examples
htmlcssimageblurmagnification

Don't blur images when magnified

This is not a answer which will get one right answer, but I'll ask it anyways:

Is it possible to maginify or enlarge an image so that it does not blur?

For example this should not happen, the pixels should not blur into each other, but should magnify with enlarged block pixels. Is there something like maginification: block; or anything like that in CSS or HTML or maybe a JS polyfill?

Solution 
  • image-rendering: pixelated;

    But it's not supported yet:

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

    these currently work, but only for downscaling:

        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) */