Height the same as width

Question

I'm using a block grid in Foundation:

<ul class="small-block-grid-3 medium-block-grid-6">
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
</ul>

I want each li to have the same height as it's width. Each li has a different width at each of Foundation's breakpoints.

I've checked the web and looked into vw, the only decent solution I can think of is setting the vw height to be the same as Foundations li width at each break point.

Is there a better solution?

I do not want to use anything other than CSS.

You may also check this answer for a grid of squares : http://stackoverflow.com/questions/20456694/responsive-square-columns/20457076#20457076 — web-tiki, Nov 20 '14 at 11:50

score 1 · Accepted Answer · answered Nov 20 '14 at 11:42

1

The alternative option in CSS to viewport units is to make use of padding-bottom

DEMO

div {
  width: 40%;
  padding-bottom: 40%;
  background: tomato;
}

<div></div>

answered Nov 20 '14 at 11:42

Danield

121,619
37
226
255

So I would just making padding bottom the same as the width at each breakpoint? – panthro Nov 20 '14 at 11:55
Yes, that's the idea. – Danield Nov 20 '14 at 11:58

Height the same as width

1 Answers1