jquery - 在调整窗口大小时调整具有多个图像的 DIV 的大小

Question

所以我在一个 div 中有 5 个相邻嵌套的三 Angular 形图像。我只是想让图像在调整窗口大小时调整大小，或者只是在不同分辨率下保持某种纵横比。我目前有固定的宽度，但 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

听起来您正在寻找流畅的布局和(我敢说)“响应式设计”- 将您的容器设置为 width:100% 并将图像设置为 float:left, width:20%, height:auto;如果您有容器的最大尺寸，请将容器的最大宽度设置为该尺寸。