さまざまなアスペクト比のコンテナに固定されたアスペクト比のオブジェクトを配置する

Question

アスペクト比が未知のコンテナdivを指定すると、イメージやコードリストのような1：1のアスペクト比を固定した1つまたは2つのコンテンツブロックを表示します。 https://jsfiddle.net/3vq0rxwj/2/

<div class="content-container"> 
    <div class="content-object"><img src="https://placehold.it/350x350" /></div> 
    <div class="content-object"><img src="https://placehold.it/350x350" /></div> 
</div> 

2との間の容器のアスペクト比のために、最良の利用可能なスペースを使用する：3,3：2、単一のオブジェクトができるだけ大きく示さなければならない。ここでの例の設定です。アスペクト比が2：3未満の場合、2つのオブジェクトを互いに重ねて表示し、アスペクト比が3：2より大きい場合は、できるだけ大きく並べて表示する必要があります。

JavaScriptを使用しないでこれを動作させる方法はありますか？

Answer 1

.content-container { 
    position:absolute; 
    background-color:#9999FF; 
    width:100%; 
    height:calc(100% - 100px); 
    display:flex; 
    flex-wrap:wrap; 
} 

.content-object { 
    display:flex; 
    justify-content:center; 
    align-items:flex-start; 
} 

.content-object:nth-child(1) { 
    flex:0 1 350px; 
    background:Plum; 
} 


.content-object:nth-child(2) { 
    flex:1 0 350px; 
    background:Purple; 
} 

@media only screen and (max-width:700px) 
{ 
    .content-object:nth-child(1) { 
     flex:1 0 350px; 
    } 
} 

@media only screen and (min-width:900px) 
{ 
    .content-object:nth-child(1) { 
     flex:1 0 350px; 
    } 
} 

https://jsfiddle.net/cmckay/3vq0rxwj/4/