-
Liquid/responsive images does not show in IE
I wanted to make a website that would be responsive to all screen sizes. I followed various bits of advice I found in some good articles on https://www.alistapart.com
I ended using up this code for the images:
<img src=”image.jpg” width=”100%” height=”auto” />And this is how it turned out:
https://www.oslcontemporary.com/alternative2/OSLcontemporary/artists/artists-AKDolven-works.htmlI am quite pleased how the page above will resize nicely on my iPhone 3.
However, I checked the same page on IE from a PC and it seems that IE cannot read the ‘auto’ tag.
I wonder if I can add a kind of workaround somewhere in the header or CSS file so that for IE users the images will show in set sizes? I’d hate to give up on my liquid mission.
-
3 Replies
-
hello…
which images? background images in a page or zoomed in images of the photos or what specifically?
sitruc
-
You have lots of errors in your code, as you can see from https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.oslcontemporary.com%2Falternative2%2FOSLcontemporary%2Fartists%2Fartists-AKDolven-works.html
This makes it harder to get consistent rendering in different browsers and platforms.
Here, IE9 on Win 7 64bit is not showing your main images at all. I don’t know why. But your long file names with commas raised my eyebrows!
-
No background images in this site, but I set the images you can see in the center to be stretched within the liquid layout. I.e. size set as a percentage rather than exact pixel size. This works wonderfully in Firefox and Safari, but not IE.
I am perhaps not so surprised since there is so much mention of IE issues, but would like to know if I can set set separate image values for IE users or something similar.
Reply to this Discussion! Login or Sign Up