ウィンドウのサイズを変更しながらdivコンテナにイメージを自動的にフィット

ウィンドウのサイズが変更されたときに空白を埋めるためにいくつかのブロックのサイズを変更する必要がありますが、どうすればこのことができますか？ウィンドウのサイズを変更しながらdivコンテナにイメージを自動的にフィット

var txt = ""; 
 
txt += "<p>innerWidth: " + window.innerWidth + " px</p>"; 
 
txt += "<p>outerWidth: " + window.outerWidth + " px</p>"; 
 

 
document.getElementById("demo").innerHTML = txt;

.container { 
 
    width:100%; 
 
    background:#fff; 
 
    height:300px; 
 
} 
 

 
.fixed-block { 
 
    float:left; 
 
    height:80px; 
 
    border:solid 2px #000; 
 
    min-width:70px; 
 
    background:#777; 
 
    width:23%; 
 
}

<div class="container"> 
 
    <div class="fixed-block"> 
 
    </div> 
 
    <div class="fixed-block"> 
 
    </div> 
 
    <div class="fixed-bblock"> 
 
    </div> 
 
    <div class="fixed-block"> 
 
    </div> 
 
    <div class="fixed-block"> 
 
    </div> 
 
</div> 
 
<div id="demo"></div>

ここではそのようなjsfiddle

出典

2017-09-21 Roland

あなたは何を試してみましたこれまでのところ？ – WhatsThePoint

私はflexboxとjavascriptを変換しようとしました。それはコンテナのサイズをdinamically制御することができ、クエリにbloclsのサイズを変更する必要があるjavascriptコードと思われる – Roland

何かがありますか？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 

     <div class="container"> 
      <div class="fixed-block"></div> 
      <div class="fixed-block"></div> 
      <div class="fixed-block"></div> 
      <div class="fixed-block"></div> 
      <div class="fixed-block"></div> 
     </div> 

     <script> 
      window.onload = resizeDivs; 
      window.onresize = resizeDivs; 

      function resizeDivs() { 
       var container = document.querySelector('.container'); 

       // Compute new size: 
       var divs = document.querySelectorAll('.fixed-block'); 
       var divNb = divs.length; 
       var divWidth = Math.round(container.clientWidth/divNb) -0.5; 
       var divHeight = container.clientHeight; 

       // Apply size to the divs 
       for(var i=0; i<divNb; i++) { 
        var div = divs[i]; 
        div.style.width = divWidth + 'px'; 
        div.style.height = divHeight + 'px'; 
       } 
      } 
     </script> 

     <style> 
      body { 
       background: lightgrey; 
      } 

      .container { 
       width:100%; 
       background:#fff; 
       height:300px; 
      } 

      .fixed-block { 
       float:left; 
       height:80px; 
       box-sizing: border-box;/*important as border should not be added to the size*/ 
       border:solid 2px #000; 
       min-width:70px; 
       background:#777; 
       width:23%; 
      } 
     </style> 
    </body> 
</html>

EDIT：ラウンド計算小さな改善とあなたが始めるために、フレキシボックスでこれを行うには、CSSを使用することができます

出典

2017-09-21 13:19:16

をopenningウィンドウでサイズを変更し実行します。

.container { 
    width:100%; 
    background:#fff; 
    height:300px; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.fixed-block { 
    height:80px; 
    border:solid 2px #000; 
    background:#777; 
    flex: 1 0 70px; 
}

出典

2017-09-21 16:39:21 SLL

ウィンドウのサイズを変更しながらdivコンテナにイメージを自動的にフィット

答えて

関連する問題