Question

我正在创建一个自适应网站，我想使用一个非常宽的图片滑块（我确定您已经看过这种类型的东西）。

我想要发生的是主站点，例如，最大宽度为1,200像素并使用流体宽度。然后我喜欢图像滑块，例如，宽度为2,000像素。在静态站点上，这是相对简单的，因为我可以简单地给图像滑块一个-400像素的负左边距以使其居中。遗憾的是，在响应式网站的情况下，这是不可能的，因为该偏移需要是流动的。

我确实遇到了制作胶印液的一些脚本，但这仅在屏幕宽度大于场地宽度（即主要内容区域的最大宽度）时才有效。当窗口变得比这个最大宽度窄时，脚本无法使图像滑块保持居中。

任何想法如何编写以保持图像滑块在窗口中水平居中，无论用户窗口是宽还是窄？

<script type="text/javascript">
    function setMargins() {
        width = $(window).width();
        containerWidth = $("#flexslider_width").width();  
        leftMargin = (containerWidth-width)/2;    
        $("#flexslider_width").css("marginLeft", -leftMargin);    
    }
    $(document).ready(function() {
        setMargins();
        $(window).resize(function() {
            setMargins();    
        });
    });
</script>

提前感谢您的任何想法，

汤姆

Answer 1

编辑：我现在明白了。试试这个：http://codepen.io/anon/pen/azoRwo

.outer{
  position: relative;
  width: 100%;
  height: 100px;
  border: 2px solid red;
  overflow: hidden;
}
.image {
  position: absolute;
  left: 50%; /* Move to the middle of the parent */
  margin-right: -50%; /* Remove that extra width */
  transform: translate(-50%, 0); /* Move left again; No IE8 support*/
  width: 1000px;
  height: 96px;
  border: 2px solid cyan; /* Just useful for debugging */
  background: url('http://i.imgur.com/rBkbXS3.jpg');
  overflow: hidden;
}

基本上我们使用父母宽度的百分比向右移动然后向左移动。如果您想在IE8中使用相同的功能，则必须使用JavaScript。

参考：http://www.w3.org/Style/Examples/007/center.en.html

Answer 2

好的，请查看：http://codepen.io/anon/pen/LEPgLp

html, body {
    margin: 0;
}
.image-slider{
    width: 100%;
    max-width: 800px;
    height: 100px;
    border: 1px solid red;
    margin: 0 auto;
    text-align: center;
}
.main{
    width: 100%;
    max-width: 800px;
    height: 100px;
    border: 1px solid green;
    margin: 0 auto;
    position: relative;
}

@media only screen and (max-width: 800px) {
    body {
        overflow: hidden;
    }
    .image-slider {
        width: 800px;
        position: absolute;
        left: 50%;
        margin-left: -400px;
        top: 0;
    }
    .main {
        margin-top: 100px;
    }
}

当您的窗口小于800px（更容易开发。只需更改值）时，我将滑块绝对位于中间位置。由于绝对位置，您的.main div将移至顶部，因此我将添加一个margin-top。只需将您的margin-top更改为滑块的高度即可。祝你好运！

响应式网站上的超宽图像滑块

2 个答案: