0

空白の画面から始めるには、次の HTML コードがあるとします。

<body>

  <div id="image">
  <img src="pic.jpg">
  </div>

</body>

CSS は次のようになります。

#image{
width:100%;
height:auto;
}

また

#image img {
width:100%;
height:auto;
}

画像divには画像のサイズ（画像の寸法は1920 * 1080ピクセル）があり、その100％は画像自体であるため、画像に変化がないため、ここで混乱しています。しかし、幅を 50% に設定しても、まだ変化はありません。

ブラウザに合わせて画像のサイズを変更したいだけです。画面の解像度は1366 * 768なので、最初はそれに合わせて画像が必要で、ブラウザのサイズを変更するときに、それに応じて画像のサイズを変更する必要がありました。

4

2 に答える 2

2

含まれている div のサイズを設定しても、画像のサイズは変更されません。代わりに画像にスタイルを設定します。

#image img {
width:100%;
height:auto;
}

デモ: http://jsfiddle.net/jcJtM/

于 2013-10-12T20:45:06.850 に答える
1

JavaScriptを試しましたか？

windowWidth = $(window).width();
windowHeight = $(window).height();

$('img').css({
    "width" : windowWidth,
    "height" : windowHeight
});

$(window).resize(function(){
windowWidth = $(window).width();
windowHeight = $(window).height();
    $('img').css({
    "width" : windowWidth,
    "height" : windowHeight
});
});
于 2013-10-12T20:49:39.100 に答える