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

不可能按照我想要的方式去做。最好的方法是为每个图像创建容器，然后为它们分配 CSS 过渡，如http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html所示

于 2013-03-28T18:08:57.867 回答