Question

我正在使用“容器流体”，并且使用“span2”等对列进行水平宽度设置非常有用。

我有一个独特的要求，我代表的东西，我想要显示“方形”，同时仍然享受Bootstrap的响应宽度设置的好处。我有一个很好的方法来确保我的元素与它们的宽度具有相同的高度吗？

Answer 1

您可以使用以下填充技巧制作具有任何宽高比的元素（高度调整为宽度）（参见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;
}

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;

在流体容器中，我可以使元素尽可能宽吗？

3 个答案: