在窗口调整大小的DIV多个图像调整大小

因此，我有5个三角形图像在一个div中彼此相邻嵌套。我只是想让图像在调整窗口大小时调整大小，或者只是保持不同分辨率的纵横比。我目前有固定的宽度，但100％开放的替代方法来获得这种工作，甚至是正确的方式来做到这一点。在窗口调整大小的DIV多个图像调整大小

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; 
}

来源

2013-03-08 Sneezy

从明年开始后，请考虑添加的jsfiddle太:) http://jsfiddle.net/arjuncc/ETZkV/ – arjuncc 2013-03-08 04:48:38

这听起来像你想找一个流体布局和（我敢说）一个 '响应式设计' - 设置您的容器宽度：100％，并设置您的图像浮动：左，宽度：20％，高度：自动;如果您有容器的最大尺寸，请将容器上的最大宽度设置为该尺寸。

来源

2013-03-08 04:47:26 orangeale

如果要调整图像使用下面的代码..

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

来源

2013-03-08 05:12:50

在窗口调整大小的DIV多个图像调整大小

回答

相关问题