Css 在流体容器中，我可以使元素像宽一样高吗？

我使用的是“容器流体”，在使用“span2”的列上设置水平宽度时效果非常好

---

我有一个独特的要求，我代表的东西，我想出现“方形”，同时仍然享受着引导的响应宽度设置的好处。是否有一种好方法可以确保元素的高度与宽度相同？

尝试以下文章中讨论的技术：

我有我自己的穷人版本的上述

可以使用两个子元素（一个图像和另一个块元素）定义容器块：

<div class="sq-wrapper">
    <img class="spacer" src="http://placehold.it/100x100">
    <div class="content">Some content...</div>
</div>

为

.sq包装提供100%的宽度，它将扩展以填充其包含的块

为
.spacer
子元素/图像指定100%的宽度，以便它将展开以填充
.sq包装
。由于图像具有固有高度，
.sq wrapper
将因
内联块
显示类型而收缩以适合图像

使用
visibility:hidden
隐藏图像，但保留其在布局中的空间，
和
verticalalign:top
处理底部多余的空白

最后，使用
position:absolute
将
.content
从流中取出

您可以在以下位置看到演示：

要注意的一件事是，如果将窗口缩小到足够小，内容可能溢出

参考

要了解CSS如何计算内联替换元素的高度，请参见：

您可以使用以下填充技巧制作任意纵横比（高度调整为宽度）的元素（请参阅）：

外部DIV使用垂直填充值作为宽度的百分比生成正方形空间
内部DIV使用外部DIV的全尺寸（填充空间通常在外部DIV中不可用）
HTML:

如果您发现这一点，并试图使背景图像保持其尺寸，然后使用

background-size: contain;

你所问的问题在CSS中是不可能的，请在这里配音@koningdavid幸运的是你错了。你可以使用非常常见的CSS技巧来填充。太棒了！不敢相信WC3规范仍然需要像这样的破解。
<div class="out">
  <div class="in">
  </div>
</div>

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

background-size: contain;