Encountering challenges with downscaled images in multiple browsers... The images must be downscaled to adapt to the browser size. Here is the code snippet:
#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;
}
The -moz-transform: rotate (0deg); improves image sharpness on various versions of Firefox. Chrome displays perfectly without any issues. However, Safari 7 displays poor quality... Any suggestions on how to address this? Perhaps using JavaScript to swap out images for Retina Display so they don't need as much downscaling? I understand that downscaling isn't an ideal solution, but what other options exist for responsive images that adapt to changes in browser dimensions?
Appreciate any insights!