css - 使用 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;
}