全宽图像可在CSS3和HTML5中进行div淡入淡出

Question

I have a full screen width background on my site, but I want to replace it with an image slideshow..everything works correctly, but when the images load in, they become all distorted.. I think it has something to do with the width/height being 100% and also with the "background-size: cover". Further explaination would also be awesome.

I'd like to make the image div fit exactly in the parent div as the "background-image:" property of does. Any help would be appreciated. Thank you very much!

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

Parent DIV CSS:

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

Answer 1

They get distorted because you forcefully set their width and height to 100% .

You should use min-width and min-height instead and center them with the translate transformation.

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

Additionally there are no negative paddings