按比例调整正方形div的高度

Question

我需要创建一个正方形，其高度和宽度均为100%，根据高度进行缩放，并始终保持其纵横比。示例插图： 。

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

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

我想提供一个关于如何尝试实现这个问题的想法，但由于我做了很多事情 - 没有一个真正有效。我尝试过绝对定位，但那需要一个宽度。我尝试过使用jquery计算宽度/高度 - 这需要太长时间 - 因为有很多条目。我尝试过使用height:100% + width:auto，但没有任何渲染效果。我尝试过上面我链接到的解决方案（非常好），但是很遗憾它基于宽度而不是高度。等等等等!! :)

与此问题相关的问题中提供的解决方案对我的问题来说不够充分。

- sinejespersen

---

请展示你已经为此所做的工作，分享你的代码，这样我们才能帮助你。 - kkakkurt

不是上面提到的问题的重复。上面链接的那个问题使用宽度... - Mads K

宽度：30vw，高度：30vw - HudsonPH

方格应该覆盖整个屏幕吗？如果是，最简单的解决方案就是视口单位。 - Midas

你应该描述一下为什么链接的答案对你来说不够充分。 - CSchulz

Answer 1

很遗憾，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>

- Midas

Answer 2

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

- Saika

Answer 3

试试这个：

width: 100vh;
height: 100vh;

演示：

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

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

jsFiddle

{{链接1：jsFiddle}}

- Stickers

---

更新了问题后的jsFiddle。 - Stickers

Answer 4

你可以使用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);
}

您可以在此示例中查看其工作原理

- Roberto Regueiro Santiago