0

我有一个中心容器宽度为 1000 像素（水平居中）的站点 它包含一个最多可伸展 2000 像素以填满全屏的滑块 - 每张幻灯片都包含一个 2000 像素的图像，每个图像中的主要文本都设计为居中放置1000px 居中的网站。

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

因此，从下面的 html 中，我基本上需要 #mySwipe div 能够拉伸到 2000 像素，但始终显示包含的幻灯片居中 - 有人有什么建议吗？

 <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;
}
4

1 回答 1

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*/

例子

于 2013-06-06T11:02:51.360 回答