7

デモ

この方法と同様の方法を使用して、任意のサイズでその比率を尊重する正方形 (または実際には任意の長方形) を作成することがあります。

私が欲しいもの：

  • 高さの小さいデバイス、つまり横向きの携帯電話で正方形がビューポートの外に広がるのを防ぐため

提案された解決策

  • を使用して、正方形の幅をビューポートの高さのパーセンテージに制限します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+ では検証されていません

仕様を間違って解釈していますか、それともブラウザ ベンダーによる実装のバグの可能性がありますか?

4

2 に答える 2

0

Opera は vh をサポートしていないと思います。既知の問題があります。このバグが表示されているものに影響を与えているかどうか疑問に思っています: http://code.google.com/p/chromium/issues/detail?id=124331 .

于 2013-09-06T14:28:21.543 に答える