Mein @keyframes-Bild wächst außerhalb meines div?

Question

Mein Bild, das @keyframes verwendet, skaliert über mein div = "Bildzoom" hinaus. Es zoomt korrekt, aber wenn es innerhalb des Divszooms zoomt, geht es nach draußen und der horizontale Schieberegler wird größer.

HTML:

<section id="intro-section"> 
    <div id="image-zoom"> 
     <h1>WELCOME</h1> 
    </div> <!-- /.container --> 
</section> 

CSS:

#intro-section { 
    height: 400px; 
    width: 100%; 
} 

#image-zoom { 
    background-image: url(/img/fairy-bg.jpg); 
    background-size:100%; 
    position:relative; 
    top:237; 
    left:0; 
    width:100%; 
    height:400px; 
    animation: zoom 30s infinite; 
    padding: 0; 
} 

@keyframes zoom { 
    0% { transform:scale(1,1); } 
    50% { transform:scale(1.2,1.2); } 
    100% { transform:scale(1,1); } 
} 

Ich weiß, es ist einfach, aber ich kann nicht sehen, wo der Fehler ist. Diese

Answer 1

ist, wo das Problem liegt:

transform:scale(1.2,1.2) 

Die Skala ist mehr als die Behältergröße. (1 = Behältergröße)

Answer 2

Versuchen Sie, einen overflow: hidden zu dem enthaltenden <div>

hinzuzufügen