Blurred images in chrome

Discussion in 'Web Design and Development' started by Tavicu, Dec 22, 2014.

  1. Tavicu macrumors regular

    Tavicu

    Joined:
    Jul 25, 2013
    Location:
    Romania
    #1
    Hello,

    I'm having a problem and i can't find a fix.

    I have an image in container with width: 100%.

    Even if the image is bigger than the container the image is still blurry in Chrome.

    In Safari i fixed it with "image-rendering: -webkit-optimize-contrast;" but i can't find a fix for Chrome.

    Here you can see the problem (look at MacBook Air text): http://newadw.yup.ro/projects/cos-technics

    The image is 1147px width and the container is 1140px (so the image is resized with css from 1147 to 1140).

    If i remove the width:100% and height: auto from css it will looks ok and crisp like original image (but without responsive).

    Anyone had this problem before?
     
  2. DevinPitcher macrumors regular

    Joined:
    May 23, 2009
    Location:
    Michigan, USA, Earth
    #2
    Why not crop off the extra 7 pixels so the browser doesn't have to size it down at all? Fixes your blurring problem for all browsers.
     

Share This Page