0

次の方法で、Web サイトのコンテンツの背後にスライドショーを作成しようとしています。

モックアップ画像。

私はこのHTMLを持っています:

<div id="wrapper">
  <div id="slideshow">
    <img src="images/image1.jpg" alt="" />
    <img src="images/image2.jpg" alt="" />
    <img src="images/image3.jpg" alt="" />
  </div>
  <div id="content">This is content</div>
</div>

そしてこのCSS：

#wrapper{
    width:100%;
    background: url(images/pattern.jpg) repeat left top;
}

#slideshow{
    position: relative;
}

#slideshow img{
    position: relative;
    left:0;
    right: 0;
    top:0;
}

#content{
   width: 1000px; /* just for testing */
   position: absolute;
   z-index: 10;
}

jQuery cycle plugin基本的なフェード効果にを使用しています

上記を使用すると、 mywrapper divは my と同じ高さになりslideshow divます。内部の画像から高さを取得しwrapperながら、ブラウザウィンドウの下部まで拡張するにはどうすればよいですか? また、水平方向slideshowを中央揃えにしたいと思います。slideshow div

ありがとう。

更新: 解決しました。
@アルバロに感謝

ここに最終的なコードがありますhttp://jsfiddle.net/r6JYr/5/

4

3 に答える 3

0

画像を水平方向に中央に配置するには、次のように設定できます。

margin:auto;

ラッパーが高さいっぱいになるように調整するには:

height:100%;

JSFiddle

于 2012-06-21T13:25:34.487 に答える
0

レスポンシブにしたい場合は、#slideshow (または #wrapper) の幅をたとえば 70% に設定してから、margin-left を 15% (15*2+70=100) に設定します。

または、たとえば 1500px のピクセル幅を設定し、1500px の左の値と 750px の margin-left の値を設定できます (1500/2= 750 として)。

それはうまくいくでしょう。

#slideshow を position:absolute; に設定する必要もあります。

そして #wrapper を削除できます

于 2012-06-21T13:16:36.767 に答える
0

いいえ、いいえ、最良の方法は、外側のコンテナーに特定の幅を与え、左右のマージンを自動に設定してから、残りをワークアウトすることです。これを見てください：

<!doctype html>
<head>
<style>
#wrapper {width:600px; background: url(images/pattern.jpg) repeat left top; position: relative; margin: 0 auto; }
#slideshow {position: relative; }
#slideshow img {position: relative; left:0; right: 0; top:0;}
#content {
   width: 600px; /* just for testing */
   margin: 0 auto;
   z-index: 2;
   position: absolute;
   border: 1px #000 solid;
   top: 0;
}
#slideshow {
   width: 1000px; /* just for testing */
   margin-left: -200px;
   z-index: 1;
   border: 1px #f00 solid;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="slideshow">
slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow 
  </div>
  <div id="content">This is content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
</div>
</div>
</body>
</head>
于 2012-06-21T13:39:49.447 に答える