我收到了以下代码：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="container">
<div class="crossfade">
<img src="http://lorempixel.com/400/200/animals/1">
<img src="http://lorempixel.com/400/200/animals/2">
<img src="http://lorempixel.com/400/200/animals/3">
<img src="http://lorempixel.com/400/200/animals/4">
<img src="http://lorempixel.com/400/200/animals/5">
</div>
</div>
以下css（从其他地方复制Multiple image cross fading in CSS - without (java) script）
.container
{
width:100px;
}
.crossfade > img {
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
.crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.crossfade > img:nth-child(5) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
我想要的是将图像大小调整为容器的大小。
答案 0 :(得分：0)
.container{width:200px;}
.container img{width:100%}<body>
<div class="container" >
<div class="div2">
<img src="http://lorempixel.com/400/200/animals/1">
<img src="http://lorempixel.com/400/200/animals/2">
<img src="http://lorempixel.com/400/200/animals/3">
<img src="http://lorempixel.com/400/200/animals/4">
<img src="http://lorempixel.com/400/200/animals/5">
</div>
</div>
尝试width：100％
.container img {width:100%;}
如果您想要根据container的尺寸，请删除div2 检查代码段
答案 1 :(得分：0)
如果您只想填充容器，可以使用：
img{
width: 100%;
height: 100%
}
但是这个解决方案可能不会保持宽高比。
答案 2 :(得分：0)
如果.container的宽度为200px，高度为100px，则可以使用以下内容;
<body>
<div class="container" style="width:200px;height:100px;" >
<div class="div2">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/1">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/2">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/3">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/4">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/5">
</div>
</div>
如果您不想使用内联css，则需要创建一个新文件，例如style.css，然后在此文件中添加<link>：
<link rel="stylesheet" href="style.css" />
<body>
<div class="container">
<div class="div2">
<img src="http://lorempixel.com/400/200/animals/1">
<img src="http://lorempixel.com/400/200/animals/2">
<img src="http://lorempixel.com/400/200/animals/3">
<img src="http://lorempixel.com/400/200/animals/4">
<img src="http://lorempixel.com/400/200/animals/5">
</div>
</div>
文件style.css（应该在同一个文件夹中）
.container{
width:200px;
height:100px;
}
.container .div2 img{
width:100%;
height:100%;
}
答案 3 :(得分：0)
这是一个建议，它处理不同的图像大小和保持纵横比。
如果您调整浏览器窗口的大小，它仍可以很好地与所有图像一起使用。
根据请求更新，使用1 container
html, body {
margin: 0;
}
.slider {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #fff;
}
.slider .image {
background-color: #fff;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity:0;
animation: sliderimagefade 20s 0s infinite;
}
.slider .image:nth-child(5) {
animation-delay: 0s;
}
.slider .image:nth-child(4) {
animation-delay: 4s;
}
.slider .image:nth-child(3) {
animation-delay: 8s;
}
.slider .image:nth-child(2) {
animation-delay: 12s;
}
.slider .image:nth-child(1) {
animation-delay: 16s;
}
@keyframes sliderimagefade {
0% {
opacity:0;
}
5% {
opacity:1;
}
25% {
opacity:1;
}
30% {
opacity:0;
}
}<div class="slider">
<div class="image" style="background-image: url('http://lorempixel.com/400/200/animals/1')">
</div>
<div class="image" style="background-image: url('http://lorempixel.com/400/100/animals/2')">
</div>
<div class="image" style="background-image: url('http://lorempixel.com/200/400/animals/3')">
</div>
<div class="image" style="background-image: url('http://lorempixel.com/400/200/animals/4')">
</div>
<div class="image" style="background-image: url('http://lorempixel.com/300/300/animals/5')">
</div>
</div>