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. > > > On Thursday, 31 October 2013, Tom Livingston wrote: >> >> List, >> >> Having an RWD problem. >> >> I have a container and an image. Nothing else is in the container. I >> need to swap said image with another for smaller devices. >> >> I could do this with background images except how do I handle the >> height of the container proportionally scaling with the image? >> >> If I put the image in as content, I can use img{max-width:100%}; to >> handle the scaling, but the swap for smaller devices is where I get >> stuck. Show/hide with display:none;/display:block; is one way, but >> that means users download 2 images when they only need one. >> >> I feel like this may be a JS solution, but I'm not that savvy with JS >> so don't know what Google solutions I've come across are good to use. >> >> Any thoughts? Can it be done with CSS in a way I'm not thinking of? >> >> TIA >> >> -- >> >> 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/ > > > > -- > Regards, > Barney Carroll > > [email protected] > +44 7429 177278 > > barneycarroll.com -- 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/
