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

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;
}

Answer 2

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

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处理底部多余的空白问题。

最后，.content使用position: absolute.

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

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

参考

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

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

Answer 3

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

background-size: contain;