小编Lar*_*rry的帖子

DEMO

有时我会使用类似于此方法的方法创建一个正方形(或任何矩形,实际上),它将遵循任何大小的比例.

我想要的是:

• 防止在高度较小的设备上延伸到视口外的正方形,即手机在景观中

提出的解决方案

• 使用的方法将square的宽度限制为视口高度的百分比 max-width: 90vh
• 期望比例得到尊重

CSS

    .square {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      overflow: hidden;
    }

    .square-inner {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .mw { max-width: 90vh;} /* solution, but makes things break */

HTML

    <div class="square mw">
        <div class="square-inner"></div>
    </div>

应该怎么做

• 在小高度的视口中,正方形的最大宽度应为视口高度的90%

实际发生了什么:

• 当视口高度小于方形宽度时:
  • 宽度按每个vh值约束
  • 高度是从正方形的宽度已经计算出它不被约束到vh
  • 我们得到一个垂直长矩形

规范说相对值是从'包含块'计算出来的,对我而言似乎应该是容器的当前宽度.

浏览器行为:

• Chrome 29.0.1547.65:如上所述
• Firefox 23.01:如上所述
• Opera:完全不尊重vh未经Opera 16+验证

我是否错误地解释了规范,或者这是浏览器供应商实施的可能错误？