高度与宽度相同[重复]

Posted 2023-03-06

【中文标题】高度与宽度相同[重复]

【英文标题】：Height the same as width [duplicate]

【发布时间】：2015-01-18 06:11:48

【问题描述】：

我在 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 以外的任何东西。

【问题讨论】：

您也可以检查这个答案以获得正方形网格：***.com/questions/20456694/responsive-square-columns/…

【参考方案1】：

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

DEMO

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

<div></div>

【讨论】：

所以我只是让填充底部与每个断点处的宽度相同？

是的，就是这样。