根据高度保持率缩放方形div

Question

我需要根据高度创建一个100％高度和宽度缩放的正方形，以便始终保持其纵横比。

示例说明：

方形div缩放的流行示例是根据宽度（https://spin.atomicobject.com/2015/07/14/css-responsive-square/）。我想用CSS / flexbox解决这个问题，但我找不到合适的解决方案。 （IE和旧版浏览器支持并不重要）

必须有多个元素共享相同的样式。 我试过画它，但我不知道这是否有意义。单个正方形需要适合外部div，但三个正方形不应该是相同的大小 - 而是适合它们各自的外部div。

我想知道我是如何尝试这样做的，但很难详细说明，因为我做了很多事情 - 它们都没有真正起作用。我尝试过绝对定位，但这需要宽度。我已经尝试使用jquery计算宽度/高度 - 这需要花费很长时间 - 因为有很多条目。我已经尝试过使用高度：100％+宽度：自动，它什么也没有渲染，我已经尝试了上面已经链接到的解决方案（这很棒，很遗憾，基于宽度为百分比，而不是高度） 。 etcetcetc！ :)

与此问题相关的问题的解决方案不足以解决我的问题。

Answer 1

试试这个：

width: 100vh;
height: 100vh;

演示：

＆＃13;

＆＃13;

body {
  margin: 0;
}
.square {
  width: 100vh;
  height: 100vh;
  background: grey;
  margin: auto;
}

＆＃13;

<div class="square"></div>

＆＃13;

＆＃13;

＆＃13;

<强> jsFiddle

Answer 2

遗憾的是，单凭CSS无法直接实现这一点。您可以像其他人提到的那样使用视口单元，但这始终相对于整个视口大小。事实证明，Javascript是使其更加灵活的唯一方法：

document.addEventListener('DOMContentLoaded', function() {
    var el = document.getElementById('square');

    (window.onresize = function() {
        el.style.width = el.clientHeight + 'px';
    })();
});

html, body {
    height: 100%;
    margin: 0;
}
#container {
    background: red;
    height: 80%;
}
#square {
    background: lime;
    height: 100%;
    margin: auto;
}

<div id="container">
    <div id="square"></div>
</div>

Answer 3

您可以使用Vh和calc

这个html

<div class="square"></div>

你可以使用这个css

body {
  background-color: #515151;
}

.square {
  margin: 1vh auto;
  background-color: #cacaca;
  height: 98vh;
  width: calc(99vh * 0.8);
}

you can see how works in this example

Answer 4

.row {
display:table;
  width:100%;
} 
.row div {
display:table-cell;
  vertical-align:top;
 
}
.col-1 ,.col-3{
background-color:red;}
.col-2 {
background-color:green;
}

<div class=row>
  <div class="col-1">1</div>
  <div class="col-2">2</div>
  <div class="col-3">3</div>
  
</div>