Jquery image swap code example I'd use that search term. Probably land it on the first try.
Best, Karl Sent from losPhone > On Oct 31, 2013, at 3:40 PM, Tom Livingston <[email protected]> wrote: > >> On Thu, Oct 31, 2013 at 4:09 PM, Tom Livingston <[email protected]> wrote: >> Thanks Barney. I'm familiar with the technique, but never thought to >> use it with an img. I'll give it a look. >> >> On Thu, Oct 31, 2013 at 4:03 PM, Barney Carroll >> <[email protected]> wrote: >>> I don't have the link to hand but you should look up Thierry Koblentz's >>> proportional video container CSS hack. Basically you create a wrapper with >>> position relative, overflow hidden, 0 height and padding-bottom as a >>> percentage of the width (so for a 16:9 aspect ratio content, you'd have >>> padding-bottom: 52.77777%). The image then needs position absolute and >>> height and width of 100%. If your images have variable proportions, you >>> should get the server to output width and height attributes for the image >>> (or somewhere else) and read them with JS to calculate the desired >>> bottom-padding and apply it inline on DOM ready. Can give demo and links >>> later on when I'm back on my laptop. > > The more I thought about this I realized that this would require the > image to be content on the page, which could then be handled with > max-width:100%;. Ratio is automagically maintained. > > The issue still remains of *swapping* images on the page, based on device > width. > I think I'm going to have to go the less-favored route of "snapping" > to widths. Coming to this conclusion based on other factors that are > coming to light. > > Thanks all. > > > -- > > Tom Livingston | Senior Front-End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
