ビューポートで固定された固定アスペクト比div、最大幅と高さまで中央に配置

Question

JavaScriptを使用せずにCSSのみでこれを実現する方法はありますか？

• 、常に所定のアスペクト比を維持する（例えば4：3）
• その幅は決して超えPXにある一定の最大、例えば

  私は、次の要件とDIVを望んその高さが所定の固定された最大値を決して超えない。 600PX

• その寸法は、それはそれはつまり垂直方向と水平方向の両方

中心だが、それはどちらか記入しなければならないことは、上記の制約

与え得ることができます限り大きいですビューポート

のそれを超えることはありません指定されたアスペクト比を維持しながら、ビューポートの幅または高さのいずれかがより制限されます。これが固定された最大幅および/または高さを超えない限り、その場合にはそれによって制約される。

もう1つのラッパーが必要です。

私はthis answerが親の幅で制約された固定アスペクト比に解決策を提供していることを知っています。また、追加のラッパーでfixed-max-width制約を追加するのは簡単です。高さの制約を加えるためにそれを適応させる方法は見えていないようです。

Answer 1

私はcss flexプロパティをお勧めします。これは、display: flexプロパティを持つ親要素の子要素を中央揃えする機能を提供します。非常に気の利いた。水平/垂直センタリングは次のように行うことができます。ここで

は、アスペクト比を維持するための説明書を持っている別のポストです： Maintain the aspect ratio of a div with CSS

html, body { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 

.center { 
    display: flex; 
    justify-content: center; 
    align-content: center; 
    align-items: center; 
    align-self: center; 
    flex: 1 0 auto; 
    height: 100%; 
    width: 100%; 
} 

.center > div { 
    align-self: auto; 
    background-color: #aaa; 
} 

.container { 
    width: 100%; 
    padding-bottom: 75%; /* achieves 4:3 aspect ratio */ 
    margin: 0 20px; 
    background-color: yellow; 
} 

.centered { 
    max-width: 800px; 
    max-height: 600px; 
    width: 100%; 
    height: 100%; 
} 

<!-- ... --> 
<div class='center'> 

    <div class='container'> 

     <!-- ensure your .centered div has 
     some specified height & width --> 
     <div class='centered'> 
      Your content 
     </div> 

    </div> 

</div> 
<!-- ... --> 

JSBin Demo Here

Answer 2

私は、最大高さはなんとかだとは思わないが、私は得ることができました残りの部分は機能します。 http://codepen.io/syren/pen/PNvorN

@mixin aspect-ratio($width, $height) { 
    position: relative; 
    max-width:400px; 
    margin: 0 auto; 
    display: block; 

    &:before{ 
     display: block; 
     content: " "; 
     width: 100%; 

     padding-top: ($height/$width) * 100%; 
    } 

    > .content { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
    } 
} 

.sixteen-nine { 
    @include aspect-ratio(16,9); 
} 

あなたはアスペクト比が上部と下部がカットオフになるだろうデバイス上で動作する方法を変更するいくつかのメディアクエリーマジックを行うことができるかもしれません。高さを0に設定しても最大高さを設定することはできませんが、幅を0に設定し、パディング - 上端または下端の代わりに左端を行い、数式を反転させた場合にはこれはうまくいくでしょう。あなたはメディアの質問を通してそうすることができます。私は今それを完全に試してみるだろうが、私は仕事に戻る必要がある。

私はあなたのどこかにつながるかもしれないいくつかのリソースを見つけました。

Maintaining aspect ratio with min/max height/width? https://dev.opera.com/articles/css3-object-fit-object-position/

幸運！