1

所以我有 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;  
}
4

2 回答 2

0

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

 $(window).resize(function () {
    var h = parseInt($(window).height(), 10);
    var w = parseInt($(window).width(), 10);
    $("img").css({
        'width': w,
        'height': h
    });
});
于 2013-03-08T05:12:50.573 回答
0

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

于 2013-03-08T04:47:26.393 回答