This is my use case:
I have a responsive webpage. The page is vertically divided into two halves, on the right - I want to show an image (a PDF page presented as PNG or JPG). The image size should change immediately after resizing the window.
I thought I already decided this. I make the image on the server large enough for the maximum possible window size (according to our company setting). Chrome and Firefox reduce (and interpolate) the image just fine.
But then there is Internet Explorer 10: if the image size is reduced to less than 100%, it looks like a million flies accidentally covering the image ... It seems I can not find a solution for this.
I found out that ol-days (IE7) called a -ms-interpolation-modeCSS rule for this , which can be set to bicubic. But it was deprecated and not available in IE9 +
Should I accept it like this? How can this be called obsolete if there is no interpolation for scaled images in IE9 +? Is there any solution for this?
I know: usually you do not allow your browser to scale your images. But do you have a better solution for this use case?
EDIT: I should have mentioned that the images in question are black text on a white background. The effect is better seen when using thin lined fonts in the image.
EDIT2: , (http://jsfiddle.net/7grxut1t/16/). Chrome IE, !
<div>
<img src="http://websocket.bplaced.net/test.png"/>
</div>
CSS
div {
position: relative;
width: 50%;
height: 100%;
}
img {
width: 100%;
}