How to maintain liquid proportions

[Timoti]

I need to keep my templated cells square, while remaining responsive, to support the proportions of some stacked slements in a design. I feel there must be an easy way to achieve this but can't find it. Have tried the old vertical percentage padding thing with abso positioned content, but no dice. What can I do?

What I'm trying to achieve is http://snpy.in/2rRFzY, [orig for susygrid) but I end up with http://snpy.in/i5uC2E. (There's some weird stuff going on with grid-gaps appearing bottom and right too, but I figure one step at a time.

Absolutely loving your videos, guides etc - appreciate all the work you've put in to making this rollout a success, and looking forward to design moving beyond a hero and three callouts.

[rachelandrew]

Can you stick up a CodePen? Otherwise this would have to wait for me to have time to build the example for you to see if I understand what you are asking, given my current workload you might wait a while!

[Timoti]

SURE! Back to you a little late on this Rachel, as I got a big difference in rendering between my local and the codepen version, and frankly poking around at that, still I'm none the wiser.

Pen is at http://codepen.io/Timoti/pen/ZeordQ.

The utlimate project is to feature four migrant women's video interviews, and the crosshatch overlay of tightly cropped images echoes the migrant network's branding.

The design goal was to have consistant aspect ratio elements with background images, essentially tightly cropped video thumbnails. To try and tame the aspect ratio variability I switched from background images to img content elements and abso-positioning any internal content over the top. At which point, proportionality improved, though differently between local - very bad (FF and chrome) against the codepen instance - just a bit off.

You can toggle the background images at line #28 by commenting out their display:none property

Designed aspect ratios were meant to be 1:0.59

Bottom line: Looking for more consistent liquid aspect ratio rendering at different viewport sizes when there is a a contant content imge forcing minimum dimensions. Vastly preferred (I need control over proportions for other projects too): is a capability to set aspect ratios for containers of empty content.

Hope that makes sense, and thanks again.

[Timoti]