0

ウェブサイトの背景のスライドショーをページの中央に配置しようとしています - 水平方向の中央揃えは問題ありません。完全にセンタリングし、縦横比を維持し、自動調整するのは素晴らしいことです。

私のコーディング能力は初歩的なので、見つけたテンプレートとスライドショーのコーディングをつなぎ合わせています。現在、スライドショーはグラフィックとボタンの後ろで問題なく再生されますが、左に配置されており、私が把握できる最善の方法は次のとおりです...

HTML（該当部分）

<div class="fadein"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <img src="images/4.jpg" alt=""> <img src="images/5.jpg" alt=""> </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();

setInterval(function () {
$('.fadein :first-child').fadeOut()
                         .next('img')
                         .fadeIn()
                         .end()
                         .appendTo('.fadein');
}, 6000); // 6 seconds
});
  </script>

CSS

.fadein
{
     position: relative;
     width: 320px;
     height: 320px;
}

.fadein img
{
     position: fixed;
     width: auto;
     height: 100%;
     z-index:-1;
}
4

1 に答える 1

0 
.fadein{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.fadein img{
  min-width:320px;
  min-height:320px;
  max-width:100%;
  max-height:100%;
  text-align:center;
}

これは、理論的には画像を中央に配置し、画面の端に当たる幅/高さの最大ポイントまで、任意のサイズにスケーリングする必要があります。ただし、それを防ぐために最大幅と高さを削除できます。

垂直方向のセンタリングを有効にするには、少しの js が必要になる場合があります。

$('.fadein img').css({
   'margin-top':($('.fadein').height()-$('.fadein img').height())/2
});

注：スライドショーがどのように機能するかはわかりません。これは、.fadein img がそのクラスと画像を含む唯一の画像であると仮定した単なる例です。セットアップに合わせて調整する必要があります。

于 2013-08-01T19:43:38.550 に答える