css - 我的@keyframes 图像在我的 div 之外增长？

Question

我使用@keyframes 的图片超出了我的 div="image-zoom"。它可以正确缩放，但随着它在 div 内缩放，它会向外移动并且水平 slider 增加。

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

我知道这很简单，但我看不出错误在哪里。

Answer 1

尝试添加 overflow: hidden包含 <div>