skip to Main Content

My images show exactly the way they are supposed to in browsers such as Chrome, Firefox and Safari. Once i open Internet explorer and see the results there it gives me quite a big difference.

This is chrome :
This is chrome :

This is Internet explorer : enter image description here

The images are both 460 x 460 and the css styles added to the images are :

background: url(../../Icons/Sigma/Vernieuwen.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 100%;
display: inline-block;
height: 20px;
width: 20px;

In chrome this resizing works fine but in IE it does not. Now all the information i found was that IE uses some kind of nearest neighbour method for the resizing and that you could fix this by changing some browsers settings.

I tried resizing the image in photoshop to 20 x 20 but the result remains the same.

My question: is there a way to give IE the same result as Chrome?

2

Answers


  1. Try using this:

    img {
        -ms-interpolation-mode: bicubic;
    }
    

    from this answer

    Login or Signup to reply.
  2. you cant change that with css. only way is to use small image, resize this image to 20px x 20px and it will work

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search