1

だから私は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;  
}
4

2 に答える 2

0

流動的なレイアウトと（あえて言うなら）「レスポンシブデザイン」を探しているように聞こえます-コンテナをwidth：100％に設定し、画像をfloat：left、width：20％、height：autoに設定します。コンテナの最大サイズがある場合は、コンテナのmax-widthをそのサイズに設定します。

于 2013-03-08T04:47:26.393 に答える
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 に答える