全宽图像滑块

Question

我的页面有一个1000px的容器用于标题（在图像下方的红色框上方）和内容（在附加图像中的红色框下方）。那些容器是固定宽度的。但我需要设置一个图像滑块，以全宽度显示图像。

我的意思是，我将包括更广泛的图像。比如说，1800x200像素。因此，如果用户的屏幕分辨率（宽度）小于或等于1000px，则将显示图像的中间部分，并且图像滑块的大小应为1000x200像素（已调整大小）。但是如果说用户的屏幕分辨率是1300（宽度），则应调整图像滑块的大小，显示图像的中心部分，滑块容器的大小将为1300x200像素！

由于已经有很多jQuery插件可用，我想不要重新发明轮子。所以尝试了很多jquery滑块。但他们似乎都没有满足我的上述需求。或者我错过了我试过的那些滑块中的一些设置？

有什么建议吗？

Answer 1

也许添加一个额外的外部容器？然后将1000px容器置于外部容器中心。 然后，当您调整窗口大小时，图像滑块将响应外部容器，内部容器保持居中。

outerContainer {
    width: 100%;
    .....
}

innerContainer {
    width: 1000px;
    margin: auto; /*or left:50% right:50%*/
}

Answer 2

你必须在.wraaper div中包装所有div并定义宽度100％。

 .wrapper{width:100%;}

并且在内部div中，您必须使用

定义部分

 .inner(width: 1000px;)

你需要100％的滑块不要使用这个.inner类。

这对你有帮助。