Question

我的背景图像在宽度方向上都太拉伸了，我已经尝试了无数种尝试来使其发挥作用。我更改了宽度参数，高度参数，从不同的角度寻找答案，但是找不到任何有效的方法。这些图片是背景图像，并且具有动画效果以使图像渐隐。我使用Google Chrome浏览器作为桌面上的浏览器和图片。我在网上找到了一些要添加到摘要中的图片。

#crossfade > img {
    width:100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: -1;
    -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 }
}

<html>
  <div id= 'crossfade'>
    <img src="https://www.gstatic.com/webp/gallery/1.jpg">
    <img src="https://www.gstatic.com/webp/gallery/2.jpg">
    <img src="https://www.gstatic.com/webp/gallery/3.jpg">
    <img src="https://www.gstatic.com/webp/gallery/4.jpg">
   </div>




</html>

Answer 1

这是由于图像宽高比所致。除了添加img元素外，还添加带有背景图像的div元素。然后，您可以相应地调整高度和位置。它将使您的长宽比保持不变。请查看以下解决方案，或在Codepen https://codepen.io/salinaacharya/pen/PVowPz

中运行

    <html>
  <div id= 'crossfade'>
   <div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/1.jpg)">
    </div> 
    <div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/2.jpg)">
    </div>
    <div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/3.jpg)">
    </div>
    <div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/4.jpg)">
   </div>
  </div>
</html>

#crossfade > .image-box {
    width:100%;
    height:500px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: -1;
    -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;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

#crossfade > .image-box:nth-child(2)  {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
#crossfade > .image-box:nth-child(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
#crossfade > .image-box:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
#crossfade > .image-box: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 }
}

Answer 2

您需要从width元素中删除属性height或#crossfade才能正确缩放，可以设置min-width和min-height尽管您可能会失去一些图像可见性，但为了获得所需的全屏模式。

#crossfade > img {
    min-width: 100%;
    min-height: 100%;
}

Answer 3

尝试将object-fit: cover添加到图像

#crossfade>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  opacity: 0;
  z-index: -1;
  animation: imageAnimation 30s linear infinite 0s;
}

#crossfade>img:nth-child(2) {
  animation-delay: 6s;
}

#crossfade>img:nth-child(3) {
  animation-delay: 12s;
}

#crossfade>img:nth-child(4) {
  animation-delay: 18s;
}

#crossfade>img:nth-child(5) {
  animation-delay: 24s;
}

@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
  }
}

<div id='crossfade'>
  <img src="https://www.gstatic.com/webp/gallery/1.jpg">
  <img src="https://www.gstatic.com/webp/gallery/2.jpg">
  <img src="https://www.gstatic.com/webp/gallery/3.jpg">
  <img src="https://www.gstatic.com/webp/gallery/4.jpg">
</div>

图像在html / css中太拉伸

3 个答案: