放大CSS HTML时如何阻止DIV粘在页面左侧

Question

场景

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

问题

我希望它保持原样，如果用户放大太多，它会离开页面。同this sites banner

示例

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

这是我的实时代码：Site Example

这是我的 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

Answer 1

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