高度与宽度相同[重复]

Question

我在 Foundation 中使用块网格：

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

我希望每个 li 的高度与其宽度相同。每个 li 在 Foundation 的每个断点处都有不同的宽度。

我已经检查了网络并查看了 vw，我能想到的唯一不错的解决方案是将 vw 高度设置为与 Foundations li width 在每个断点处相同。

有没有更好的解决方案？

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

Answer 1

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

DEMO

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

<div></div>