CSSを使用して％またはmax値で埋め尽くす

Question

iはiframeのアスペクト比を維持するためにCSSを使用してiFrameのサイズを変更します（ここでは、Responsive video iframes (keeping aspect ratio), with only css?）。

.iframe-wrapper { 
    position:relative; 
    width:100%; 
    height: 0; 
    padding-bottom:58%; 
} 

.iframe-wrapper iframe { 
    position:absolute; 
    left:0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
} 

しかし、私が直面しています問題は、非常に幅の広いスクリーンのため、これはiframeの高さが大きいことが原因となり、ユーザーは、私が避けたいコンテンツを表示するためにスクロールしなければならないことです。だから私は最大値を設定する方法を探しています。フレームラッパーのパディング - 下部のビューポートのサイズに基づいて。これのようなものですが、ボトムパッドの場合：

max-height: calc(100vh - 200px);  

これを行う方法はありますか？ padding-bottomトリックを持つ要素がmax-heightプロパティの影響を受けないように、この操作を行うための最も効率的な方法は、あなたに応じて、異なるアスペクト比に要素を切り替え、メディアクエリを作成することです

Answer 1

:-)

感謝そのような現在のブラウザ幅、：

.iframe-wrapper { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 58%; 
} 

.iframe-wrapper iframe { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
} 

@media (min-width: 1200px) { 
    .iframe-wrapper { 
    padding-bottom: 40%; 
    } 
} 

Answer 2

あなたが同じ比率を維持したい場合はパディング底が幅に依存しているとして、あなたは（画面の高さ/あなた比の最大幅を追加することができます）からコンテナdivへ：

.container { 
 
    margin: 0 auto; 
 
    max-width: 178vh;// 100/56 
 
} 
 

 
.framewrapper { 
 
    background: pink; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-bottom: 56%; 
 
} 
 

 
.framewrapper iframe { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="framewrapper"> 
 
    <iframe src="http://blar.com" width="20" height="10" scrolling="no"></iframe> 
 
    </div> 
 
</div>

あなたはしなければならない場合は、メディアクエリを追加し、を100VHするパディングを修正したが、その後の比率は同じに滞在しません。

Answer 3

最近、％埋め込みや最大埋め込みなどのパディングの問題が発生しました。私は非常に便利な方法を見つけました...透明な画像を使用しています。

どのように動作しますか？まず、私はこのメソッドを使用する必要があります/あなたが設定する必要があります/明確な最大幅/高さは、コンテナに行くと言う必要があります。

例：あなたはuは両側のために必要がある場合

1. 50x600透明画像（複数可）を作成...重複は50px（最大）の800x600のコンテナ+右/左パディングを持っています。
2. フロートは、あなたは、あなたが今、あなたのメインコンテナと便利な答えを