Div Square,宽度尺寸基于100%高度

Question

我正在尝试根据元素的(100%)高度制作宽度大小的响应方块.我相信只使用CSS是不可能的.

方形宽度应等于高度(大容器的100%.大容器超过屏幕的100%).比率必须是宽度=高度才能保持正方形.

Answer 1

你可以用一个很小的内嵌图像来做到这一点。没有JS，没有额外的文件。

.container {
  height: 150px;
  width: 100%;
  text-align: center;
  background: #acd;
}
    	
.square {
  display: inline-block;
  height: 100%;
  background: #691;
}

<div class="container">
  <div class="square">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
  </div>
</div>

Answer 2

看看...属性aspect-ratio。

此属性可以用最简单的方法根据高度创建方形 div。这是一些示例代码：

h2 {
  font-family: calibri;
}

#parent {
  height: 96px;
  width: 256px;
  background: grey;
  margin-bottom: 16px;
}

#child {
  height: 80px;
  aspect-ratio: 1 / 1;
  background: lightgrey;
}

#anotherParent {
  height: 96px;
  width: 256px;
  background: grey;
}

#anotherChild {
  height: 50%;
  aspect-ratio: 1 / 1;
  background: lightgrey;
}

<h2>Absolute height (80px/96px)</h2>
<div id="parent">
  <div id="child">
  </div>
</div>

<h2>Relative height (50%)</h2>
<div id="anotherParent">
  <div id="anotherChild">
  </div>
</div>

以下是一些帮助您了解纵横比属性的链接：

• https://css-tricks.com/almanac/properties/a/aspect-ratio/
• https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
• https://support.squarespace.com/hc/en-us/articles/115008538927

Answer 3

好的，解决方案在这里。

<div id="square" style="background-color:black;height:100%">test</div>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

http://jsfiddle.net/j372H/7/