I may be trying to do something that is not feasible. I would like to exchange an image three times. The image is my logo, and I have a logo_450 450px size which contains 6 lines of text, a logo_600 600px size which contains 4 lines of text, and logo 750px size which contains two line of text.
I tried <img srcset> but that appears to be only for the same image in separate resolutions.
I am now using <picture> <source media> and trying to use min max width for the 600 px.
Yet, all that this does is give me the 450 and 750 px image at the break points.
Is what I am trying to do possible with html and css exclusively?
<picture>
<source media="(max-width:450px)" srcset="logo_450.png">
<source media="(min-width:451px) and (max-width=800px)" srcset="logo_600.png">
<img src="logo.png" alt="Curious Oddities of Skin and Bones, with logo of a skull">
</picture>
Yes, with CSS animations. Look at "Demo with multiple images" at this page.
http://css3.bradshawenterprises.com/cfimg/
(I don't know if that site is good, just the first example I found).
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)