[Solved] Preserving aspect ratio on non-image elements

[jimmy]

Hey!

So I have this layout: http://codepen.io/jimmythenice/pen/GbnFr

Is there a nice and clean way to scale it with browser window size? If I set the tiles to %-based size, it indeed scales, but only in width.

My idea is to have a tile-container box along with an image floated to the right inside another box.

So, basically:

<div class="big box">
<div class="tile-container">
[...]
</div>
<img src="[...]"/>
</div>

And I need the big-box to scale with the browser width, preserving the aspect ratio of itself and every element inside, including each individual tile…

How can I achieve this? I tried different hacks using padding-top: 100%, but couldn’t achieve anything solid.

Any help?

[TheDoc]

Use padding-bottom and make sure to give it height: 0;: http://codepen.io/ggilmore/pen/1a539203873ecd432b7172acb3cf8e54

[jimmy]

You’re an amazing person.

[TheDoc]

You’re an amazing person.

I’ll take it!

[mnadams]

Yesssss! Thank you.

[Author]

Posts