css - 在 Fluid Container 中，我可以让元素的高度和它们的宽度一样大吗？

Question

我正在使用“container-fluid”，并且使用“span2”等对列的水平宽度设置非常有效。

我有一个独特的要求，即我要表示我想要显示为“正方形”的东西，同时仍然享受 Bootstrap 响应式宽度设置的好处。有没有一种好方法可以确保我的元素的高度与其宽度相同？

Answer 1

您可以使用以下填充技巧(请参阅 jsfiddle)制作具有您希望的任何宽高比的元素(高度调整为宽度):

1. 外部 DIV 使正方形空间具有垂直填充值作为宽度的百分比。
2. 内部 DIV 使用外部 DIV 全尺寸(填充空间通常在外部不可用)。

HTML:

<div class="out">
  <div class="in">
  </div>
</div>

CSS:

.out {
  position: relative;
  height: 0;
  padding-bottom: 100%;
}
.in {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
}