1

シナリオ

サイトに幅 2000px のバナーがあり、ズームインするとバナー全体がそのページの左側にくっつきます。

質問

ユーザーがズームインしすぎると、ページから外れてしまいます。このサイトのバナーと同じ方法

例

バナーに 2000px の画像があり、画像の主要部分が中央にあり、幅は 1000px です。ズームインすると画像が移動し、画像の中心が右に移動します。

これが私のライブコードです:サイトの例

これは私の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 に答える