CSS宽度100％高度

Question

甚至可以仅使用CSS使我的宽度达到100％的高度？不使用Javascript等。

{
    width: /*100% of height*/
}

Answer 1

这个

有新的css单位

width: 100vh;

这意味着元素的宽度将是视口高度的100％。

  

CSS3有一些新值可用于调整与当前相关的内容   视口大小：vw，vh和vmin。   三个值中的任何一个上的一个单位是视口轴的1％。   “视口”==浏览器窗口大小==窗口对象。如果视口是   40厘米宽，1伏= = 0.4厘米。

     

1vw =视口宽度的1％1vh =视口高度的1％1vmin = 1vw或   1vh，取较小的1vmax = 1vw或1vh，以较大者为准（css-tricks post）

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/length

PS：在现代浏览器中，对这些新属性的支持实际上相当不错。 See here

Answer 2

这个问题Height equal to dynamic width (CSS fluid layout)似乎有一个很好的CSS答案由Nathan Ryan。同样值得阅读下面的评论，以获得更多解释。我希望这会有所帮助。

如果您发现解决方案过于复杂，那么在某人拥有良好的替代解决方案时，可能值得为您尝试实现的目标提供更多背景信息。