响应式设计中的相对定位

Question

我正在主页上创建一个具有固定标题和导航栏以及旋转横幅的响应式网站。横幅是使用一些javascript和css位置值制作的。因此标题，导航栏和旋转横幅工作正常，但因为横幅具有宽度：100％和高度：自动属性，它们显然根据窗口大小或设备进行扩展和收缩。当我尝试添加以下内容时，我不知道该怎么做以便在我需要使用位置时保持舒适：绝对或相对以及要显示的内容的最高值。我已经厌倦了使用％，但似乎没有用。

JSFiddle

.header {
height:74px;
width:100%;
}

.navbar {
height:24px;
width:100%;
}

#banners {
position:relative;
}

#banners img {
position:absolute;
z-index:1;
top:98px;
width:100%;
height:auto;
}

#banners img.active {
z-index:3;
}

<div class="header"></div>
<div class="navbar"></div>

<div id="banners">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>

<div id="content">

</div>