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

【问题标题】：Scale square div according to height keeping ratio [duplicate]根据高度保持率缩放方形div
【发布时间】：2016-10-13 20:32:36
【问题描述】：

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

示例说明：

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

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

我想介绍一下我是如何尝试这样做的，但很难详细说明，因为我已经做了很多事情 - 没有一个真正奏效。我试过绝对定位，但这需要一个宽度。我已经尝试使用 jquery 计算宽度/高度 - 这需要 waaaay 很长 - 因为有很多条目。我试过使用 height:100% + width:auto，它什么都不渲染，我试过上面链接的解决方案（这很棒，是的，遗憾的是基于宽度的百分比而不是高度） .等等等等！！ :)

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

【问题讨论】：

请告诉我们你为它做了什么。分享您的代码，然后我们可以为您提供帮助。
不是上述问题的重复项。上面链接的那个使用宽度...
宽度：30vw，高度：30vw
正方形是否应该覆盖整个屏幕？如果是这样，最简单的解决方案是视口单位。
您应该描述为什么链接的答案对您来说不够。

标签： css flexbox

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

【讨论】：

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

【讨论】：

【解决方案3】：

试试这个：

width: 100vh;
height: 100vh;

演示：

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

&lt;div class="square"&gt;&lt;/div&gt;

jsFiddle

【讨论】：

修改jsFiddle 更新问题。

【解决方案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);
}

you can see how works in this example

【讨论】：