在窗口調整大小的DIV多個圖像調整大小

Question

因此，我有5個三角形圖像在一個div中彼此相鄰嵌套。我只是想讓圖像在調整窗口大小時調整大小，或者只是保持不同分辨率的縱橫比。我目前有固定的寬度，但100％開放的替代方法來獲得這種工作，甚至是正確的方式來做到這一點。

HTML

<div id="projects"> 

    <div id="project_1"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_2"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_3"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_4"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_5"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 
</div> 

CSS

body { 
    background-color: #1b1b1b; 
    margin: 0; 
    padding: 0; 
    overflow: hidden ; 
    position: relative; 
    -webkit-transition: left .2s ease; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    width: 9800px; 
} 

#projects { 
    padding-top: 3.085%; 
} 

#project_1, #project_2, #project_3, #project_4, #project_5 { 
    float: left;  
} 


#snitch { 
    width: 1960px; 
} 

.tribox1 { 
    background-repeat: no-repeat; 
    background-position: bottom; 
    padding-top: 5px; 
} 

.tribox2 { 
    background-repeat: no-repeat; 
    background-position: left center; 
    margin-left: -498px;  
} 

.tribox3 { 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-left: -501px;  
} 

.tribox4 { 
    background-repeat: no-repeat; 
    background-position: right center; 
    margin-left: -500px; 
} 

.tribox5{ 
    background-repeat: no-repeat; 
    background-position: bottom right; 
    margin-left: -464px; 
    padding-top: 51px; 
} 

Answer 1

這聽起來像你想找一個流體佈局和（我敢說）一個 '響應式設計' - 設置您的容器寬度：100％，並設置您的圖像浮動：左，寬度：20％，高度：自動;如果您有容器的最大尺寸，請將容器上的最大寬度設置爲該尺寸。

Answer 2

如果要調整圖像使用下面的代碼..

$(window).resize(function() { 
    var h = parseInt($(window).height(), 10); 
    var w = parseInt($(window).width(), 10); 
    $("img").css({ 
     'width': w, 
     'height': h 
    }); 
});