我有一个中心容器宽度为1000px（水平居中）的网站，其中包含一个可拉伸至2000px的滑块，以填充全屏-每个幻灯片均包含一个2000px的图像，每个图像中的主要文字均设计为适合以1000像素为中心的网站。
我的问题是，无论屏幕大小如何，我都需要滑块在中央显示，但是今天早上让我头疼！
因此，从我下面的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;
}
最佳答案
我认为通过纯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