1

设想

我的网站上有一个宽度为 2000 像素的横幅,当我放大整个横幅时,它会粘在该页面的左侧。

问题

我希望它保持原样,如果用户放大太多,它将离开页面。与此站点横幅相同的方式

例子

我在横幅中有一个 2000 像素的图像,图像的主要部分位于中心,宽度为 1000 像素。如果放大图像移动并且图像的中心向右移动。

这是我的实时代码:站点示例

这是我的 CSS:

    #slideshow { 
    margin: 0 auto; 
    position: relative; 
    left:0px;
    width: 2000px; 
    height: 400px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    display:block;
    text-align:center;
    float: none;
}
#slideshow img {
   margin: 0 auto;
   text-align:center; 
}
#slideshow > div { 
    position: absolute; 
}
#banner {
    background: #EAEAEA;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    width: 100%;
    position: absolute;
    left: 0px;
    overflow-x: hidden;
    top: 180px;
}

这是我的 HTML:

 <div id="banner">
    <div id="slideshow">
      <div><a href="#"><img src="AG/images/bulbs.png"></a></div>
      <div><img src="AG/images/cables.png"></div>
   </div>
</div>

我还在学习,所以我感谢你的帮助:D

4

1 回答 1

2

使位置相对,并在要移动横幅的方向上添加一些填充。

于 2013-04-20T16:09:20.473 回答