html - 画像の幅をウィンドウサイズと同じに保つ方法

Question

ウェブサイトに画像スライダーを使用していますが、ウィンドウの幅に応じて画像をウィンドウと同じサイズに保つ必要があります。

私はCSSでこれを持っています:

#slider {
    width:100%;
    height:306px;
    background:#fff url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;
    box-shadow: 0px 1px 5px #999999;

#slider img {
    width:100%;
    height:306px;
    position:absolute;
    border:none;
    display:none;
}

そしてHTML：

<div id="slider">
    <img src="images/image-slider-2.jpg" alt="" />
</div>

したがって、#slider は div id であり、次に画像の #slider img ですが、画像を 100% に保つことはできません

これに関するアイデアはありますか？

ありがとう

Answer 1

ドキュメント本文の幅も指定する必要があります。

html, body, #slider, #slider img { width: 100%; }