3

誰かが Web ページを拡大したときのように、元の画像のままになります (できれば CSS で行うことができます)。

4

3 に答える 3

1

本体に背景画像を設定し、background-size: 100%それを使用して画面全体に表示します。これにより、あなたがやろうとしていることを達成できます。本体以外の要素に適切な方法があるかどうかはわかりません。

于 2013-02-14T22:53:28.057 に答える
0

ビューポート自体の大きさを把握する必要があるため、これにはjavascriptが必要だと思います...cssで検出できないビューポートが変更されるたびに...javascriptが入る場所です。javascriptを確認する必要があります/jqueryサイズ変更ブラウザイベント。jQueryは、http：//api.jquery.com/resize/にあるいくつかの例を使用して、これを非常にうまく実装しています。これらの例は、非常に簡単に使用できるはずです。

彼らが与える例は、ウィンドウのサイズが変更されたときに本体の新しい幅を追加することです...これは、ウィンドウがズームされたときの同じトリガーです。

このjsfiddleを見てください。私が行ったことは、最初に新しいビューポートの幅を挿入することです。次に、ボックスの幅と高さをビューポートの1/5を基準にして再調整しました。

魔法のコードは次のとおりです。

$(window).resize(function() {
    $('#log').append('<div>' + $(this).width() + '</div>');
});

幅を変更するのは次のとおりです。

if (logWidth == width/3) {
    console.log("hooray.");
}
else {
    console.log("resize the log please.");
    logWidth = width/3;
    $('#log').width(logWidth);
}

このifelseステートメントは、背景画像のニーズに合わせて変更できます。

これにより、サイズ変更イベントで必要な要素の背景画像/幅/その他を設定するために使用できる新しい幅が得られます。

于 2013-02-14T23:04:32.093 に答える