css - calc() を使用して、アスペクト比に従って自動サイズの要素を作成しますか?

Question

calc私はビデオコンテナを持っています。これを使用して、幅に基づいて高さを計算できれば素晴らしいと思います。

このようなことが可能であると主張するstackoverflowの答えがいくつかあります：

.selector{
  width: 100%;
  height: calc(width * 1.75);
}

しかし、Chrome 26 でその動作を見たことがありません。CSS3 のみを使用して高さを計算するにはどうすればよいですか?

score 6 · Accepted Answer

これを回避する方法があり、calc() を使用する必要がなくなります。これを知っておいてもらいたいと思います。

高さをゼロに設定し、要素の幅に相対的なパディングを使用して固定比率を作成できます。

.selector {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom:175%;
}

私はよくこのテクニックを使って、16:9 の YouTube 動画をレスポンシブに表示します。これを行うには、子要素を次のように設定するだけです-

.selector .child {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

score 5 · Accepted Answer

vh および vw ユニットを使用することは、固定されたレスポンシブビューフレームを取得するための優れた方法です。

.sixteen-nine {
   width: calc(75vh * 1.77);
   height: 75vh;
}

これにより、画面の高さに対して約 16:9 のビューポートが得られます。

5 に答える 5