0

画像を含む大きな div があります。ブラウザのウィンドウの高さ/幅に応じて、その画像を縮小または拡大したい。を使用してこれを水平に実現できますwidth: 100%が、高さを 100% に設定すると、画像の div が完全に消えます。

BODY と HTML の高さと幅を 100% に設定する必要があることを認識しましたが、これを行っても無駄でした。

ハードコーディングされたピクセルの高さを指定すると、画像は問題なく表示されますが、ブラウザーが小さくなると縮小する必要があります。

できればCSSだけで、これを達成する正しい方法を誰かが知っていますか?

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

HTML, BODY {
  width: 100%;
  height: 100%;
}

#imagecontainer {
  width: 100%;
  height: 100%;
  background-image: url(image.jpg);
  background-size: 100% auto;
  background-position: center;
}
4

1 に答える 1

0

たぶん、このようなものですか？ http://jsfiddle.net/dangoodspeed/N3MaJ/1/ 質問を 100% 理解しているかどうかはわかりませんが、必要な行は

background-size: cover;
于 2013-10-23T01:04:44.217 に答える