此方法存在问题......

Question

我使用HTML5和CSS3制作布局。

我需要页面上的图块，这是一个方形div元素。 tile位于bootstrap列中，我需要宽度自动匹配列宽，但我发现很难让height = width，因为width是一个百分比值：100％。

HTML：

...
<div class="col-md-2">
    <div class="tile tile-square tile-auto">
        ...
    </div>
</div>
...

CSS：

.tile-square{
    width: 100%;
    height: how to do this?
}

我对jQuery / js解决方案没问题，但我更喜欢使用CSS3单独解决这个问题。 CSS3中有一个“calc（）”语句，但我不知道它是否能够实现这一功能。

Answer 1

使用纯CSS2.1，您可以通过设置padding-top: 100%使一个框保持1：1的比例（因为垂直填充是根据容器宽度计算的，而不是高度）。对您的问题的评论提供了一些示例链接。

Answer 2

完成jQuery

var x = $('.element').width();
$('.element').css(
    {'height': x + 'px'}
);

JSFiddle上的演示

Answer 3

我相信你不能用CSS3做到这一点。 CSS只是造型。您可以使用JQuery / JS实现此目的：

var width = $('div.tile-square').width();
$('div.tile-square').height(width + 'px');

或者你可以这样做（不是首选）：

$('div.tile-square').css('height', $('div.tile-square').css('width'));

JSFiddle：http://jsfiddle.net/7k8pp/3/

Answer 4

晚会，但仍然相关。已经提到过，虽然没有全面的例子，但可以使用纯CSS来实现。

为了保留任何元素的宽高比，我们可以使用padding-top（基于元素的宽度）。因此，如果我们将元素的宽度设置为25%，则将padding-top属性设置为25%将强制元素变为方形。

看一下下面的例子：

＆＃13;

.tile {  
  background: #369; float: left;
  width: 23%;
  margin: 1%;
  position: relative;
}
.tile-square {
  padding-top: 23%; /* 23% (.tile width) - 2% (top and bottom margin) */
  height: 0;
}
.tile__content {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  padding: 10px;
  color: #fff;
}
body {margin: 1%;}

＆＃13;

<div class="tile tile-square tile-auto">
  <div class="tile__content">Tile 1</div>
</div>
<div class="tile tile-square tile-auto">
  <div class="tile__content">Tile 2</div>
</div>
<div class="tile tile-square tile-auto">
  <div class="tile__content">Tile 3</div>
</div>
<div class="tile tile-square tile-auto">
  <div class="tile__content">Tile 4</div>
</div>

＆＃13;

此方法存在问题......

因为我们使用了填充来强制元素的高度与宽度相同，所以如果我们将内容添加到.tile，添加的内容似乎会出现在底部，元素将不再是一个正方形。为了解决这个问题，我们将.tile元素设置为relative，然后在里面添加第二个元素（.tile__content）。然后我们绝对定位.tile__content，使其位于填充占据的区域上。

Answer 5

我不知道纯css方法，但在jquery中你可以使用$( document ).width();。它将返回宽度，您可以将其设置为高度。

$( document ).width();将返回px中的值。

HTML5 / CSS3制作一个方形div，宽度为100％，需要高度等于宽度

5 个答案:

此方法存在问题......