javascript - 响应式图像 slider 以填充 div 高度

Question

我正在尝试获得响应式图像 slider 。它必须:

• 填充一个div的高度
• 宽度溢出
• 居中

应该类似于http://www.niraalpina.com .我正在寻找不涉及固定尺寸的跨浏览器兼容 CSS 解决方案。

我已将网站上传到 http://test5.twinzebras.com/ ，请看一下，让我知道我做错了什么。

Answer 1

最好的办法是使用这样的设置:

HTML

<div class="container">
    <div id="img1"></div>
    <div id="img2"></div>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
}

#img1 {
    background: url('../img.jpg') no-repeat center center;
    background-size: cover; // also give 'contain' a go
}

如果 cover 没有满足您的要求，请尝试 contain — 我不太确定您要找的是哪个。

注意:此解决方案依赖于在 .container 周围设置一个固定高度的 div:这完全依赖于您网站的其余设置，因此我们对此无能为力.