wechselndes Hintergrundbild ist nicht ansprechbar

Question

so ist, ich bin versucht, die Hintergrund-Bild mit CSS Übergang, ich habe ein Problem zu ändern, dass das img nicht reagiert auf diese Weise kann mir einen Weg gefunden, helfen, es wäre 100% Höhe und Breite?

.container{ 
    width:100%; 
    height:600px; 

} 

.container img, .top{ 
    max-width:100%; 
    max-height:100%; 
} 

.top{ 
    width:100%; 
    height:300px; 
    -webkit-transition: background-image 0.5s; 
    display:block; 
} 

.top:before{ 
    content: ""; 
    background-image:url(https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg); 
    background-repeat: no-repeat; 
    background-size: contain; 
    -webkit-transition: background 0.5s; 
    width: 100%; 
    height: 100%; 
    display:block; 
} 

.container:hover .top:before { 
    content: ""; 
    background-image: url(http://www.jokopost.com/wp-content/uploads/2015/09/%D7%90%D7%99%D7%A7%D7%A1-commons.wikimedia.org_.png); 
    -webkit-transition: background 1s; 
    width: 100%; 
    height: 100%; 
    display: block; 
} 


<div class="container"> 
<div class="top"> 
</div> 
</div> 

https://jsfiddle.net/7ejtydts/2/

Answer 1

Mit "background-size: enthalten;" wird das Bild ansprechen, aber es wird es nicht über seine Dimensionen hinaus dehnen. Das Beispiel, das Sie gepostet haben, ist reaktiv, aber nur, wenn Sie den Container verkleinern.

Verwendung von "Hintergrundgröße: Abdeckung;" Das Bild wird auf die Größe des Containers gestreckt. Dies hat den Nachteil, dass die Ränder des Bildes abgeschnitten werden, wenn der Behälter nicht das gleiche Verhältnis hat.

Werfen Sie einen Blick auf meine aktualisiert Geige hier:

.container{ 
    width:600px; 
    height:600px; 

} 

.container img, .top{ 
    max-width:100%; 
    max-height:100%; 
} 

.top{ 
    width:600px; 
    height:400px; 
    -webkit-transition: background-image 0.5s; 
    display:block; 
} 

.top:before{ 
    content: ""; 
    background-image:url(https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    -webkit-transition: background 0.5s; 
    width: 100%; 
    height: 100%; 
    display:block; 
} 

.container:hover .top:before { 
    content: ""; 
    background-image: url(http://www.jokopost.com/wp-content/uploads/2015/09/%D7%90%D7%99%D7%A7%D7%A1-commons.wikimedia.org_.png); 
    -webkit-transition: background 1s; 
    width: 100%; 
    height: 100%; 
    display: block; 
} 

https://jsfiddle.net/7ejtydts/3/

Answer 2

diesen Code Versuchen Sie, es wird das Ansprechverhalten des Bildes anpassen.

.top::before { 
    background-image: url("https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg"); 
    background-repeat: no-repeat; 
    background-size: contain; 
    content: ""; 
    display: block; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 
.top { 
    display: block; 
    height: 600px; 
    position: relative; 
    width: 100%; 
}