Constrain an objects width BY height (flexible) + centre it

[liamcrean]

Hello

I think I’m being pretty dim here… I know it’s it’s pretty easy to constrain an relatively positioned element’s height based on width (using padding-top as % and absolutely positioning child with 100% height/width inside it) but, doing it the other way around is causing me a massive headache.

(Note – I need to do this to a container, not an image, which would be easy peasy…)

Any help would be great…

Here’s a pic to show what I mean.

http://i65.tinypic.com/2lafnkw.png

[Paulie_D]

I can’t think why you would want to do this but perhaps viewport units might be useful here?

[liamcrean]

Thanks.

Why? I need to constrain the container for a photographer’s gallery so no browser cropping of images/video occurs. I’ll then use media queries to ensure that if the viewport width becomes too narrow I fit the container to the width not the height. The the constraint of the design means we’re using full browser height for the gallery windows for maximum impact – but it’s creating this head scratcher…

Any idea how you’d approach it with Viewport units? Even if theoretical?

[Paulie_D]

So your container is 100vh tall and the width must therefore be…what…lemme think width: calc(100vh / 3 * 4);

Right?

http://codepen.io/Paulie-D/pen/KWKEYq

[liamcrean]

That’s a really interesting approach AND I’ve definitely learnt something new there.

With a little tweak it works perfectly. Thanks for the tip :)

[Author]

Posts