全寬圖像可在CSS3和HTML5中進行div淡入淡出

Question

我的網站上有全屏寬度的背景，但是我想用圖像幻燈片替換它。.一切正常，但是當圖像加載時，它們全部失真了。.我認為這與寬度有關/ height為100％，並且還帶有“ background-size：cover”。 進一步的解釋也很棒。

我想使image div完全適合父div，就像do的“ background-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;
}

父級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

由於您將其width和height強制設置為100%它們會變形。

您應該改用min-width和min-height ，並使用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;
}

此外，沒有負填充