基于高度的CSS正方形[重复]

【问题标题】：CSS square based on height [duplicate]基于高度的CSS正方形[重复]
【发布时间】：2014-09-12 01:09:55
【问题描述】：

是否可以根据 pixels 中的 height 用 css 制作一个正方形 div？

这个问题类似于this one（标记为重复），但在这种情况下，我希望以像素或任何单位设置高度。

当基于宽度时，有一个简单的解决方案：

.mydiv {
    height: 0;
    padding-bottom: 100%;
}

但是这里'高度跟随宽度'。我正在寻找'宽度跟随高度'的解决方案。因此，如果我将 height 设置为 300px，width 会跟随它。

现在我正在使用 javascript 来更新窗口大小。但我想找到一个 CSS 解决方案，这就是为什么 我不是在寻找一个 javascript 解决方案

【问题讨论】：

【解决方案1】：

您可以使用新的viewport size units

CSS

html,body {
    height: 100%;
    margin: 0;
}
div {
    background: red;
    height: 100vh;
    max-width:100vh;
    box-sizing: border-box;
}

【讨论】：

这不是在回答他的问题。据我所知，他想知道是否可以让高度以特定方式影响宽度。顺便说一句，我也很想知道。
@sb 如果你看演示，这就是问题的答案，div 的纵横比是根据它的高度保持的。
但仅适用于这个非常具体的示例。编辑：顺便说一句，我不是要刻薄或任何东西。我只是说我希望的答案（我猜其他人也是）仍然存在:)
不要这么认为！我怀疑他是否试图填充这样的方形视口。
这里的问题是 vh 是相对于屏幕（分辨率）大小的，所以很难（并且需要 js）制作 like height: 150px;最后 - 我认为这个解决方案确实有效，但 vh 单位使它不太有用（例如与基于宽度的解决方案进行比较）