Question

我有一个中心容器宽度为1000像素（水平居中）的网站它包含一个最大可扩展到2000像素的滑块以填满整个屏幕 - 每张幻灯片包含一个2000像素的图像，每个图像中的主要文本旨在适合集中在1000px中心站点。

我的问题是，无论屏幕大小如何，我都需要集中显示滑块，但它让我今天早上头疼！

所以从我下面的html中我基本上需要#mySwipe div能够伸展到2000px但总是显示包含幻灯片居中 - 有没有人有任何建议？

 <body>
    <div class="content">
       <div id="headBlock">
          <div class="navContent">
               <div class="logo"><a href="index.html"></a></div>
               <div class="marketingTxt"></div>
               <div class="clearFix"></div>

                <nav>
                <ul>
                    <li><a href="./" class="sel" title="The liquid homepage" id="homeHL">home</a></li>
                    <li><a href="about-us/" title="About liquid" id="aboutHL">about us</a></li>
                    <li><a href="what-we-do/" title="What liquid do" id="whatHL">what we do</a></li>
                    <li><a href="clients/" title="liquid's clients" id="clientsHL">clients</a></li>
                    <li><a href="news/" title="News and blog post" id="newsHL">news</a></li>
                    <li><a href="contact-us/" title="Contact liquid" id="contactHL">contact</a></li>
                </ul> 
        </nav>
     </div>
</div>
<div class="sliderContainer">
        <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
        <div class='swipe-wrap'>
        <div><img src="images/Bravissimo_Banner_ie.jpg" width="2000" height="390" alt="Bravissimo"> </div>
        <div><img src="images/Keggy_Banner_Ie.jpg" width="2000" height="390" alt="Keglevich">     </div>
       <div> <img src="images/Radley_Banner_ie.jpg" width="2000" height="390" alt="Radley"></div>
       <div> <img src="images/Tiger_Banner_ie.jpg" width="2000" height="390"> </div>
    </div>
 </div>

我的css如下 -

.content {
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
    min-width: 1000px;
    overflow-x: hidden;
}
.sliderContainer {
    background: url("../images/lowbg.png") repeat scroll 0 0 transparent;
    border-bottom: 1px solid #898279;
    box-shadow: 1px 4px 9px -6px inset;
    height: 390px !important;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: -8px;
    z-index: 1;
}
#mySwipe {
    max-width: 2000px !important;
    margin: 0 -500px !important;
    min-width: 1000px;
}

Answer 1

我认为通过纯css实现你想要的唯一方法就是将图像用作背景图像：

HTML：

<div id="wrapper">
    <div class="imageHolder" style="background-image:url(http://lorempixel.com/1000/1000/)"></div>
</div>

CSS

#wrapper {overflow:hidden; min-width:500px; max-width:1000px;} /*widths should change to match your needs*/
#wrapper .imageHolder {background-position:center center; width:100%; height:500px;} /*height should change to match your needs*/

Example

视口中的中心滑块

1 个答案: