title: Image downscaling with CSS … Images are blurry in several Browsers
body: <p>I'm having issues with downscaled IMGs in several browsers… The Images need to be downscaled because they're responsive to the browser size… This is my code:</p>
  
  <pre><code>#pic-holder img {
      -moz-transform: rotate(0deg);
      /*image-rendering:-webkit-optimize-contrast;*/
      max-width: 70%;
      width:900px;
      height: auto;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      z-index:1;
  </code></pre>
  
  <p>}</p>
  
  <p>The -moz-transform: rotate (0deg); lets the image get sharper in several versions of firefox. Chrome looks perfect, no problems… But Safari 7 looks very shitty… Does someone have an idea what i could do? Using a JS to change images for Retina Display? That it doesn't have to downscale so much information? I know that downscaling isn't a very smart solution, but what else could I do to have responsive images that get scaled while chaning the browsers width and height?</p>
  
  <p>Thank You!</p>