1

こんにちは簡単な質問ですが、それを理解することはできません。

ユーザーがブラウザのサイズに関係なく、画像がコンテンツに表示されるように、ブラウザに画像を入力したいと思います。

また、ユーザーがブラウザを小さくした場合、画像が中央に留まり、最初にエッジが失われるように、画像を中央に配置する必要があります。彼が理にかなっていることを願っています。

この背後にある理由は、レイヤースライダーと呼ばれる場所にプラグインを配置するつもりです。

これが私のコードです

<div id="div1">
<img src="images/gifts.jpg" height"100%" width"100%">
</div>

編集1：申し訳ありませんが、ユーザーがブラウザの幅を減らすと画像は中央に留まりますが、ユーザーが高さを減らすとエッジが失われ始めるように、画像の比率を維持する必要があることを追加するのを忘れました画像は縮小されるため、ブラウザの高さや幅に関係なく、常に比例した状態が保たれます。

編集2：これが私が欲しいもののリンクですが、私は画像がdivにある必要があります。

ありがとう

4

4 に答える 4

3

仕切り自体に高さと幅を適用します。

#div1 { height:100%; width:100%; }

仕切りで高さが機能しない場合は、ページのhtmlと本文も100％の高さになるように変更する必要があります。パディングとマージンをクリアすることもお勧めします。

html, body { height:100%; padding:0; margin:0; }

JSFiddle。

その仕切りを他のコンテンツの後ろに表示したい場合は、後ろのコンテンツよりも大きいz-indexを設定し、仕切りを配置する必要があります。

body { position:relative; z-index:1; }
#div1 { position:fixed; z-index:1000; }

編集：

画像の比率を保つには：

/* If the browser doesn't support media queries */
div#div1 img { height:100%; width:100%; }

/* If the screen is portrait */
@media screen and (orientation:portrait) { 
    div#div1 img { height:auto; width:100%; }
}

/* If the screen is landscape */
@media screen and (orientation:landscape) {
    div#div1 img { height:100%; width:auto; }
}

JSFiddleを更新しました。

于 2013-02-15T12:50:52.723 に答える
1

これを試して：

div または任意の要素の高さを設定する場合は、body と html の高さを 100% に設定する必要があります。

body,html{
  height:100%;
}

#div1{
  height:100%
}
于 2013-02-15T12:57:41.080 に答える
1

以下を追加CSS

#div1 img {
    position : absolute;
    height:100%;
    width:100%
}
于 2013-02-15T12:52:06.193 に答える
1

あなたのイメージを追加 

 <img src="images/bg.jpg" id="bg" alt="">

このCSSを追加

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

このjqueryを使う

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});
于 2013-02-15T12:58:19.210 に答える