基于高度的CSS方块

Question

是否可以div根据高度(以像素为单位)制作带css 的正方形？

这个问题是相似到这一个(标记为一式两份),但在这种情况下,我想的高度,以像素或任何单位进行设定.

基于宽度,有一个简单的解决方案:

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

但这里'高度跟随宽度'.我正在寻找'宽度跟随高度'的解决方案.因此,如果我将高度设置为300px,宽度将遵循它.

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

这是一个游乐场

Answer 1

你可以使用新的viewport size units

CSS

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

这并没有回答他的问题。据我所知，他想知道是否有可能以特定的方式使高度影响宽度。顺便说一句，这也是我很想知道的。 (8认同)
但仅限于这个非常具体的例子。编辑：顺便说一句，我并不是想刻薄或什么。我只是说我所希望的答案（我想其他人也一样）仍然存在:) (3认同)
这里的问题是 vh 与屏幕（分辨率）大小相关，因此很难（并且需要 js）做出像 height: 150px; 这样的设置。最后 - 我认为这个解决方案确实有效，但 vh 单位使它不太有用（例如与基于宽度的解决方案进行比较） (2认同)