高度与宽度相同

Question

我在Foundation使用了一个块网格：

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

我希望每个li都有与其宽度相同的高度。每个李在每个基金会的断点都有不同的宽度。

我已经检查了网络并查看了vw，我能想到的唯一合适的解决方案是将vw高度设置为与每个断点处的基础li宽度相同。

有更好的解决方案吗？

我不想使用除CSS以外的任何东西。

Answer 1

CSS中对视口单元的替代选项是使用padding-bottom

<强> DEMO

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

<div></div>