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] <javascript:;>]
> 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
______________________________________________________________________
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/
