javascript - 响应图像滑块填充 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 中设置width100 height%

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