ASP.Net 4.0 - Image is jagged after scaling down in IE11, IE10 and IE9

See more:

ASP.NET

ASP.NET4

Hi Guys,

I really need your help on how to resolve this issue. I am using ASP.net 4.0 (VB Coding).

I would like to scale down an image while at the same time also retain the image quality in IE11, IE10 and IE9 browsers.

My Problem:

After scaling it(image) down from 300px to 150px the image is rough, jagged. It looks good in Firefox and Chrome, but in IE11, IE10 and IE9 it is rough.

Please check my code snippet below if what would I need to add or change.

CSS:

#divImage img
{
    -ms-interpolation-mode: bicubic;
    max-height:150px!important;
    height:auto;
    width:auto;
}

HTML:

<div id="divImage">
     <img id='img1'  runat="server" />
</div>

'Code-behind:

Dim imgLoc As String = "images/sampleimagehere.png" 'actual height is 300px
img1.Attributes.Add("src", imgLoc + "?refreshTime=" +     DateTime.Now.Ticks.ToString())

Thanks in advance

Hifiger