【问题标题】：HTML5/CSS3 make a square div, width is 100%, need height equals widthHTML5/CSS3 制作一个方形 div，宽度为 100%，需要高度等于宽度
【发布时间】：2013-12-09 05:04:53
【问题描述】：

我正在使用 HTML5 和 CSS3 进行布局。

我需要页面上的图块，这是一个方形 div 元素。瓷砖在引导列内，我需要宽度自动匹配列宽，但我发现很难让高度 = 宽度，因为宽度是一个百分比值：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()”语句，不知道能不能实现这个功能。

【问题讨论】：

检查这些link1 link2
看看这个：siebennull.com/equal_width_height.html

标签： jquery html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

用 jQuery 完成

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

JSFiddle上的演示

【讨论】：

【解决方案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/

【讨论】：

在我看来他应该使用 .height() 和 .width() 而不是 .ccs('height') 和 .css('width')
@AdityaPonkshe 这些函数之间的唯一区别是一个返回px 中的值，一个返回一个实际数字（参见here）。对于这种情况，这并不重要。
我知道它们之间的区别。在我看来，正确的做法是将宽度存储在不同的变量中，然后将其用作高度。过去你的方法给我带来了很多错误。
@AdityaPonkshe 感谢您让我知道。我已经更新了我的答案。

【解决方案4】：

晚会，但仍然有意义。有人提到，这可以使用纯 CSS 来实现，尽管没有全面的示例。

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

看看下面的例子：

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

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

这个方法有问题...

因为我们使用了padding来强制元素的高度和宽度一样，所以如果我们再给.tile添加内容，添加的内容看起来会出现在底部，元素将不再是正方形。为了克服这个问题，我们将.tile 元素设置为relative，然后在其中添加第二个元素（.tile__content）。然后我们绝对定位.tile__content，使其位于填充占据的区域之上。

【讨论】：

【解决方案5】：

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

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

【讨论】：