Javascript 响应图像滑块，填充div高度

我正在尝试获得一个响应迅速的图像滑块。它必须：

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

它应该类似于。我正在寻找一个跨浏览器兼容的CSS解决方案，不涉及固定尺寸

---

我已将网站上载到，请查看并让我知道我做错了什么。

您最好使用以下设置：

HTML 如果

cover

不能满足您的要求，请尝试

contain

——我不太确定您要找的是哪一个

---

注意：此解决方案依赖于在

容器周围有一个固定高度的div

：这完全依赖于站点的其他设置，因此我们无法在这方面为您提供太多帮助。

您可以在img中将

宽度
和
高度
设置为100%

#img1{
背景：url（'../img.jpg'）无重复中心；
宽度：100%；
身高：100%；
}
请添加一些代码行我昨天开始使用这个库：它填充宽度，高度是自动计算的，我想编辑它以填充高度而不是宽度应该不会太困难。谢谢MaKR，我一直在尝试调整woothemes.com/flexslider，但无法使其工作。谢谢，已尝试使用contain和cover进行此操作，但在浏览器中查看时没有任何效果。能否提供有关哪些不起作用的更多信息？你需要在某个地方设置一个固定的高度，否则整个东西将
height=0
，因此不可见。j6m8如果你查看测试站点，你可以看到图像滑块在挤压整个宽度而不是隐藏它时，是如何不成比例地填充div区域的。我已将高度设置为：#幻灯片{height:100%；max height:1000px；您没有使用我提出的解决方案，所以我不能确定出了什么问题。我最好的猜测是您在每个
元素上设置了
高度：100%
，这会强制拉伸它们，而不是保持纵横比。无法实现“完全出血”（无空格）在
标签中以不同大小的图像进行幻灯片放映，这就是我建议使用
和CSS路线的原因。
<div class="container">
    <div id="img1"></div>
    <div id="img2"></div>
</div>

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

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