16:9ビデオのように、ほぼ横長に固定されたアスペクト比を持つ、まとめるサイトがあります。
利用可能な幅と利用可能な高さを満たすために、それを中央に配置して拡大させたいですが、どちらの側でも大きくなることはありません。
例えば：
私が見てきた2つの方法があります。
divしますが、主要なブラウザ間で同じように動作させることができませんでした。私はあなたがJSでこれを非常に簡単に行うことができることを知っています、しかし私は純粋なCSSソリューションが欲しいです。
何か案は？
回答:
新しいCSSビューポート単位 vwとvh（ビューポートの幅/ビューポートの高さ）を使用する
垂直方向と水平方向のサイズを変更すると、要素は常に比率を壊すことなく、またスクロールバーなしで最大ビューポートサイズを満たします。
div
{
width: 100vw;
height: 56.25vw; /* height:width ratio = 9/16 = .5625 */
background: pink;
max-height: 100vh;
max-width: 177.78vh; /* 16/9 = 1.778 */
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
}ビューポートの最大90％の幅と高さを使用する場合：FIDDLE
また、ブラウザのサポートもかなり良いです：IE9 +、FF、Chrome、Safari- caniuse
Danieldさらに使用するために、LESSミックスインでの回答を再定式化するだけです。
// Mixin for ratio dimensions
.viewportRatio(@x, @y) {
width: 100vw;
height: @y * 100vw / @x;
max-width: @x / @y * 100vh;
max-height: 100vh;
}
div {
// Force a ratio of 5:1 for all <div>
.viewportRatio(5, 1);
background-color: blue;
margin: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}使用するCSSメディアクエリを @media一緒にCSSビューポート単位 vwとvhビューポートのアスペクト比に適応します。これには、などの他のプロパティも更新するという利点がありfont-sizeます。
このフィドルは、divの固定アスペクト比と、そのスケールに正確に一致するテキストを示しています。
初期サイズは全幅に基づいています：
div {
width: 100vw;
height: calc(100vw * 9 / 16);
font-size: 10vw;
/* align center */
margin: auto;
position: absolute;
top: 0px; right: 0px; bottom: 0px; left: 0px;
/* visual indicators */
background:
url(data:image/gif;base64,R0lGODlhAgAUAIABAB1ziv///yH5BAEAAAEALAAAAAACABQAAAIHhI+pa+EPCwA7) repeat-y center top,
url(data:image/gif;base64,R0lGODlhFAACAIABAIodZP///yH5BAEAAAEALAAAAAAUAAIAAAIIhI8Zu+nIVgEAOw==) repeat-x left center,
silver;
}次に、ビューポートが目的のアスペクト比よりも広い場合は、基本測定として高さに切り替えます。
/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
div {
height: 100vh;
width: calc(100vh * 16 / 9);
font-size: calc(10vh * 16 / 9);
}
}これは、への静脈に非常に似ているmax-widthとmax-height のアプローチだけで、より柔軟な、@Danieldこともできます。
これに対する私の最初の質問は、どちらも固定されたアスペクトの要素をどのように持つか、それを指定されたコンテナー内に正確に合わせる方法でした。これは少し面倒です。個々の要素のアスペクト比を維持したいだけの場合は、はるかに簡単です。
私が遭遇した最良の方法は、要素の高さをゼロにしてから、パディングの下部のパーセントを使用して要素に高さを与えることです。パーセンテージのパディングは、要素の幅に常に比例します。たとえ上部または下部のパディングであっても、高さではありません。
したがって、これを利用して、要素をコンテナ内に配置するための幅のパーセンテージを指定し、パディングしてアスペクト比を指定できます。つまり、幅と高さの関係を指定できます。
.object {
width: 80%; /* whatever width here, can be fixed no of pixels etc. */
height: 0px;
padding-bottom: 56.25%;
}
.object .content {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 40px;
}したがって、上記の例では、オブジェクトはコンテナの幅の80％を占め、その高さはその値の56.25％です。幅が160pxの場合、下のパディング、つまり高さは90px-16：9アスペクトになります。
ここでの問題ではないかもしれないわずかな問題は、新しいオブジェクトの内部に自然な空間がないことです。たとえば、テキストを入れる必要があり、そのテキストが独自のパディング値を取る必要がある場合は、内部にコンテナーを追加し、そこにプロパティを指定する必要があります。
また、vwユニットとvhユニットは一部の古いブラウザではサポートされていないため、私の質問に対する回答は受け入れられない可能性があり、さらにローファイを使用する必要がある場合があります。
あなたがしたいことをあなたが尋ねたことを理解しました CSS特定の解決策アスペクト比を維持するには、高さを目的のアスペクト比で割る必要があります。16：9 = 1.777777777778。
コンテナの正しい高さを取得するには、現在の幅を1.777777777778で除算する必要があります。widthだけではコンテナのチェックができない、CSSまたはパーセンテージで除算することができないのでCSS、これなしでは不可能です。JavaScript（私の知るです。
目的のアスペクト比を維持する作業スクリプトを作成しました。
HTML
<div id="aspectRatio"></div>CSS
body { width: 100%; height: 100%; padding: 0; margin: 0; }
#aspectRatio { background: #ff6a00; }JavaScript
window.onload = function () {
//Let's create a function that will scale an element with the desired ratio
//Specify the element id, desired width, and height
function keepAspectRatio(id, width, height) {
var aspectRatioDiv = document.getElementById(id);
aspectRatioDiv.style.width = window.innerWidth;
aspectRatioDiv.style.height = (window.innerWidth / (width / height)) + "px";
}
//run the function when the window loads
keepAspectRatio("aspectRatio", 16, 9);
//run the function every time the window is resized
window.onresize = function (event) {
keepAspectRatio("aspectRatio", 16, 9);
}
}を使用functionして別の比率で別の何かを表示したい場合は、もう一度使用できます
keepAspectRatio(id, width, height);window.onresizeブラウザがサイズを変更した瞬間に発生します。
これに対処するために指定された新しいCSSプロパティがありますobject-fit。
http://docs.webplatform.org/wiki/css/properties/object-fit
ブラウザーのサポートはまだいくらか欠けています（http://caniuse.com/#feat=object-fit）-現在、Microsoftを除くほとんどのブラウザーである程度機能していますが、時間を考えると、この質問に必要なものとまったく同じです。
ダニエルドの答えは良いですが、divがビューポート全体を埋めるとき、または少し使用することによってのみ使用できますcalc、ビューポート内の他のコンテンツの幅と高さがわかっている場合は使用して使用できます。
ただし、margin-bottomトリックを前述の回答の方法と組み合わせると、問題は他のコンテンツの高さを知っているだけで済むようになります。これは、高さが固定のヘッダーがあるが、たとえばサイドバーの幅がわからない場合に役立ちます。
body {
margin: 0;
margin-top: 100px; /* simulating a header */
}
main {
margin: 0 auto;
max-width: calc(200vh - 200px);
}
section {
padding-bottom: 50%;
position: relative;
}
div {
position:absolute;
background-color: red;
top: 0;
left: 0;
bottom: 0;
right: 0;
}<main>
<section>
<div></div>
</section>
</main>ここでは、scssを使用するjsfiddleにあります。これにより、値の取得元がより明確になります。
ダニエルの答えに基づいて、私は#{}ブートストラップモーダルダイアログ内にあるYouTubeビデオのiframeに対して、補間（）を使用してこのSASSミックスインを作成しました。
@mixin responsive-modal-wiframe($height: 9, $width: 16.5,
$max-w-allowed: 90, $max-h-allowed: 60) {
$sides-adjustment: 1.7;
iframe {
width: #{$width / $height * ($max-h-allowed - $sides-adjustment)}vh;
height: #{$height / $width * $max-w-allowed}vw;
max-width: #{$max-w-allowed - $sides-adjustment}vw;
max-height: #{$max-h-allowed}vh;
}
@media only screen and (max-height: 480px) {
margin-top: 5px;
.modal-header {
padding: 5px;
.modal-title {font-size: 16px}
}
.modal-footer {display: none}
}
}使用法：
.modal-dialog {
width: 95vw; // the modal should occupy most of the screen's available space
text-align: center; // this will center the titles and the iframe
@include responsive-modal-wiframe();
}HTML：
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video</h4>
</div>
<div class="modal-body">
<iframe src="https://www.youtube-nocookie.com/embed/<?= $video_id ?>?rel=0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-danger waves-effect waves-light"
data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>これにより、幅または高さがビデオに比例しない場合、youtubeがiframeに追加する黒い部分なしでビデオが常に表示されます。ノート：
$sides-adjustment 側面に現れるこれらの黒い部分のごく一部を補正するためのわずかな調整です。.modal-footerます。.modal-dialogます。.modal-headerます。多くのテストを行った結果、これは現在、問題なく機能しています。
ここでは、div内でも機能する@Danieldソリューションに基づくソリューションを示します。
その例では、Angularを使用していますが、すぐにバニラJSまたは別のフレームワークに移行できます。
主なアイデアは、@ Danieldソリューションを空のiframe内に移動し、iframeウィンドウサイズの変更後に寸法をコピーすることです。
そのiframeは、その親要素と寸法を合わせる必要があります。
https://stackblitz.com/edit/angular-aspect-ratio-by-iframe?file=src%2Findex.html
ここにいくつかのスクリーンショット：
position: relative (default) height: 0 padding-<top/bottom>: H/W*100%