响应图像滑块以填充div高度

Question

我正在尝试获取响应式图像滑块。它必须：

• 填写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：这完全取决于您网站的其他设置，因此我们无法帮助您。

Answer 2

您可以在img

中将width和height设置为100％

#img1 {
    background: url('../img.jpg') no-repeat center center;
    width: 100%;
    height: 100%;
}