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/
