4

私が試みていることを行ういくつかの方法を見つけましたが、これを行うための最良の方法または推奨される方法が正確にはわかりません...基本的には、1000pxの固定幅#main divが必要です。左側と右側には、解像度が十分に大きい場合は幅を広げることができる2つの別々の画像が必要ですが、そうでない場合、画像はドキュメントの幅にカウントされません。それが理にかなっていることを願っています。助言がありますか？

4

3 に答える 3

2

背景画像 (bg.jpg など) を 1400px 幅にすることができます。このbg.jpgに左右の画像を入れます。

左の画像は bg.jpg の一番左に、右の画像は一番右に行きます。最後に、bg.jpg という 1 つの画像しかありません。

メイン ラッパーが中央揃えの場合は、css を本文に追加できるため、背景画像も中央揃えになります。しかし、メインラッパーは左右の画像をカバーしません。

body{
background-image: url("bg.jpg") center 0 no-repeat;
}
于 2012-06-17T16:40:32.013 に答える
1

これらの 2 つの画像を背景画像として設定してみませんか : (非常に簡単です)

background-image: url("background_one.png"), url("background_two.png");
background-position: left top, right top;
background-repeat: no-repeat;
于 2012-06-17T06:51:51.673 に答える
0

両側の画像の幅がそれぞれ200ピクセルであるとすると、ビューポートの幅が1400ピクセルよりも広い場合にのみ表示する必要があります。

あなたはCSSメディアクエリでそれを行うことができます。

.side-img {
    display: none;
}

@media screen and (min-width: 1400px) {
    .side-img {
        display: block;
    }
}

一部の古いブラウザ（IE7、8）はメディアクエリを理解しないため、これらのブラウザでサイドイメージが表示されることはありません。

それが問題である場合は、JavaScriptベースのソリューションをお勧めします。これは、このjQuery関数に沿ったものです。

$(window).bind('resize',function(e){
    calcWidth(); // Called whenever window is resized.
});

function calcWidth(){    
    var sideImgs = $('.side-img');
    var winW = $(window).width();
    if (winW > 1400){
        sideImgs.css('display', 'block');
    } else {
        sideImgs.css('display', 'none');
    }
}

calcWidth();​ // Run this on page load.
于 2012-06-17T06:36:01.223 に答える