Javascript - どのタイプのロジックがこれに使用されていますか？

Question

私はこれを解決する方法に関する情報を得るために何を検索するのか分からない。最大幅は、各画像を与える

は、基本的には毎日の3枚のランダム画像があるだろうが、彼らはxvwの合計を超えてはなりません（など100vw）

Instedは、私が希望CALC（3/100）を言うことができます画像のダイナミックなライブ幅を持つこと。

例here（サンプル02を表示するには、下にスクロール）

あなたがサンプル01で見たよう、同じ幅ではない画像がすべてを使用していないながら、大きな画像が幅の多くを取ることができ、本当に素晴らしいです本当にすばらしい視野幅。

サンプル02に示されているように、全体のユーザーエクスペリエンスに悪影響を与える2つのワイド画像があると、ちょっと壊れます。

もし3枚の画像が100vwを超えるなら、何とか最大幅を設定する必要がありますか？しかし、どうすればこのことを確認できますか？

CSS

.wrapper{ 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: space-between; 
     width: 100vw; 
     height: 100vh; 
     background-color: #eee; 
    } 
    .wrapper img{ 
     max-width: 50vw; 
     max-height: 50vh; 
    } 

HTML

<h2>Sample 01</h2> 
<div class="wrapper"> 
    <img src="img4.jpg" alt="#"> 
    <img src="img2.jpg" alt="#"> 
    <img src="img3.jpg" alt="#"> 
</div> 
<h2>Sample 02</h2> 
<div class="wrapper"> 
    <img src="img4.jpg" alt="#"> 
    <img src="img5.jpg" alt="#"> 
    <img src="img3.jpg" alt="#"> 
</div> 

Javascriptを？

基本的に、このタイプの問題に関する情報を得るためには何を検索する必要がありますか？

これは、jQueryの質問^^すべての

Answer 1

まず、すべての画像が同じ高さを取る得るためにフレキシボックスを使用し、そのアスペクト比に応じた幅ではありません。今

、新しい幅が利用可能なスペースに合うように簡単にするために（この場合はウィンドウ）コンテナの高さを再計算する

を小さな関数を使用し、私はonclickの上で機能を実行して、あなたが呼び出すことができますそれは、負荷時に、または類似しています。

function resize() { 
 
    var ctn = document.getElementById("container"); 
 
    var width = ctn.offsetWidth; 
 
    var height = ctn.offsetHeight; 
 
    var windowWidth = window.innerWidth - 50; 
 
    var ratio = windowWidth/width; 
 
    ctn.style.height = height * ratio + 'px'; 
 
}

#container { 
 
    border: solid 1px red; 
 
    display: inline-flex; 
 
    height: 200px; 
 
} 
 

 
.item { 
 
    height: 100%; 
 
}

<div id="container" onclick="resize()"> 
 
<img src="http://lorempixel.com/400/200" class="item" /> 
 
<img src="http://lorempixel.com/400/300" class="item" /> 
 
<img src="http://lorempixel.com/400/400" class="item" /> 
 
</div>