0

CSSのみを使用して画像スライダーを作成しています。コーディングはほぼ完了しましたが、スライド中に画像が不均衡にスケーリングされないようにするために何をしなければならないかわかりません。私はまだそれらがdivを埋め、100％に引き伸ばされないようにしたいと思っています。また、（あなたに）これを行う方法を見つけてもらいたいので、画像をカットしたくありません:)

ここに私のコードの一部があります:

div#transition3 {
  width:480px; 
  height:360px; 
  -webkit-animation:trans2 12s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-box-sizing:border-box; 
  -webkit-background-origin:border-box; 
  background-scale:fill; 
}

@-webkit-keyframes trans2 /* Safari and Chrome */
{
  0%   {background:url('../img/1.jpg') no-repeat top left;}
  10%  {background:url('../img/1.jpg') no-repeat top left;}
  20%  {background:url('../img/2.jpg') no-repeat top left;}
  30%  {background:url('../img/2.jpg') no-repeat top left;}
  40%  {background:url('../img/3.jpg') no-repeat top left;}
  50%  {background:url('../img/3.jpg') no-repeat top left;}
  60%  {background:url('../img/4.jpg') no-repeat top left;}
  70%  {background:url('../img/4.jpg') no-repeat top left;}
  80%  {background:url('../img/5.jpg') no-repeat top left;}
  90%  {background:url('../img/5.jpg') no-repeat top left;}
  100% {background:url('../img/1.jpg') no-repeat top left;}
}

ここにフィドルがあります: http://jsfiddle.net/qDmS8/3/。私が言いたいことを理解して、私を助けてくれることを願っています。

前もって感謝します！

4

1 に答える 1

2

自分のやりたいようにできるわけがない。これを行う最善の方法は、各画像のコンテナーを作成し、次にhttp://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.htmlに示されているように CSS トランジションをそれらに割り当てることです。

于 2013-03-28T18:08:57.867 に答える