在流体容器中，我可以让元素高达他们宽吗？ [英] In Fluid Container, Can I Make Elements as Tall as they Are Wide?

问题描述

我使用容器流体，事情对于使用span2等的列进行水平宽度设置非常有用。

I'm using "container-fluid" and things work great for horizontal width-setting on columns using "span2", etc.

我有一个独特的要求其中我代表的事情，我想出现广场，同时仍然享受Bootstrap的响应宽度设置的好处。有没有一个好的方法来确保我的元素有和它们的宽度一样的高度？

I have a unique requirement where I am representing things that I want to appear "square" while still enjoying the benefits of Bootstrap's responsive width-setting. Is there a good way for me to make sure my elements have the same height as their width?

推荐答案

您可以使用以下填充技巧（请参阅 jsfiddle ）创建任意长宽比（高度调整为宽度）：

You can make an element with any aspect ratio you wish (height adjusts to the width) with the following padding trick (see jsfiddle):

1. 外部DIV使用垂直填充值的方形空间作为宽度的百分比。


2. 使用外部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;
}

这篇关于在流体容器中，我可以让元素高达他们宽吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！