如何保持图像宽度与窗口大小相同

时间:2013-04-03 18:00:44

标签: html css

我正在为网站使用图像滑块,并且需要图像与窗口保持相同的大小,具体取决于窗口的宽度。

我在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%

有关于此的任何想法吗?

由于

1 个答案:

答案 0 :(得分:0)

也应指定文档正文的宽度。

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