用css自动调整大小

Question

我有以下问题：

我有一张经过幻灯片的图片，我需要它总是调整大小到窗口和显示器的大小，我想我会用：

min-height: 100%; 
min-width: 1024px; 
width: 100%; 
height: auto; 

但是没有解决我的问题在上面的图像显示我当前的问题，我有一个标题DIV和一个FOOTER DIV，它叠加了图像，图像正在两个div下面吃掉它的碎片，我该如何解决此？

要演示的图片：

Answer 1

img {
    min-height: 100%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 

    position:relative;
    z-index:1000;
}

这将确保图像显示在所有内容

之上

修改

<div id="header"></div>
<div id="image">
    <img src="image_path">
</div>
<div id="footer"></div>

如果这是你的来源，你的CSS应该是这样的。

#header,#footer{
height:150px; // You set the number
width:100%;
}

#image{ /* The code you were using */
     min-height: 100%; 
     min-width: 1024px; 
     width: 100%; 
     height: auto;
}