在流体容器中，我可以让元素像宽一样高吗？答案

【问题标题】：In Fluid Container, Can I Make Elements as Tall as they Are Wide?在流体容器中，我可以让元素像宽一样高吗？
【发布时间】：2013-06-16 05:57:33
【问题描述】：

我正在使用“container-fluid”，对于使用“span2”等的列的水平宽度设置效果很好。

我有一个独特的要求，即我希望呈现“方形”的东西，同时仍然享受 Bootstrap 响应式宽度设置的好处。有什么好的方法可以确保我的元素的高度与宽度相同？

【问题讨论】：

CSS 无法实现您的要求，请在此处配音 stackoverflow.com/questions/5445491/…
@koningdavid 幸运的是你错了。为此，您可以使用非常常见的 CSS 技巧和填充。

标签： css twitter-bootstrap

【解决方案1】：

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

http://alistapart.com/article/creating-intrinsic-ratios-for-video

我有我自己的穷人版本。

你定义一个包含两个子元素的容器块，一个图像和另一个块元素：

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

只需创建具有所需纵横比的轻量级图像。

应用以下 CSS：

.sq-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    border: 1px solid gray;
}
.sq-wrapper .spacer {
    width: 100%;
    visibility: hidden;
    vertical-align: top;
}
.sq-wrapper .content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
}

给.sq-wrapper 100% 的宽度，它将扩展以填充其包含的块。

为.spacer 子元素/图像设置100% 的宽度，以便它展开以填充.sq-wrapper。由于图像具有固有高度，.sq-wrapper 将缩小以适应图像，因为 inline-block 显示类型。

使用visibility: hidden 隐藏图像但在布局中保留其空间，和vertical-align: top 来处理extra-whitespace-at-the-bottom 问题。

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

您可以在以下位置查看演示：http://jsfiddle.net/audetwebdesign/BQ2eJ/

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

参考

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

http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height

【讨论】：

【解决方案2】：

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

外部 DIV 使用垂直填充值作为宽度百分比的方形空间。
内部 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;
}

【讨论】：

太棒了！不敢相信 WC3 规范仍然需要这样的 hack。

【解决方案3】：

如果您发现此问题并试图让背景图像保持其尺寸，请使用

background-size: contain;

【讨论】：