Question

所以我在div中将5个三角形图像彼此相邻嵌套。我只是想让图像在窗口调整大小时调整大小，或者只是在不同分辨率上保持一定的宽高比。我目前有固定的宽度，但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％，高度：自动;如果容器的最大大小，请将容器上的max-width设置为该大小。

Answer 2

如果要调整图像大小，请使用以下代码..

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

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

2 个答案: