Javascript CSS3和HTML5中的全宽图像到div交叉淡入淡出

我在我的网站上有一个全屏背景，但我想用一个图像幻灯片来代替它。一切正常，但当图像加载进来时，它们都会失真。。我认为这与100%的宽度/高度以及“背景尺寸：封面”有关。进一步的解释也会很棒

我想使image div与parent div完全匹配，就像does的“background image:”属性一样。任何帮助都将不胜感激。多谢各位

图像分割CSS:

#crossfade > img {
    width: 100%;
    height: 100%;
    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;
}

.main-content {
  margin-top: -5px;
  display: inline-block;
  content: "";
  position: relative;
  padding-top: -5px;
  height: 300px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-image: url(../content/images/header_bg.jpg) no-repeat center center;
  background-size: cover;
  z-index: 0;
}

父DIV CSS:

#crossfade > img {
    width: 100%;
    height: 100%;
    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;
}

.main-content {
  margin-top: -5px;
  display: inline-block;
  content: "";
  position: relative;
  padding-top: -5px;
  height: 300px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-image: url(../content/images/header_bg.jpg) no-repeat center center;
  background-size: cover;
  z-index: 0;
}

---

因为您强制将其

宽度

和

高度

设置为

100%

，所以它们会变形

您应该使用

minwidth

和

minheight

代替，并使用

translate

变换将它们居中

#crossfade > img {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    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;
}

此外，没有消极的填充