CSS - 背景画像への拡大

Question

背景画像に拡大縮小する際にいくつか問題があります。

問題がある：スケーリングが発生したときに

• 水平および垂直スクロールバーが表示されます。私はchildDivを削除しました。それはそれかもしれないと思っていましたが、運はありません。 しかし、max-heightとmax-widthを設定してみましたが、これは役に立ちませんでした。

画像がズームインされるのではなく、幅と高さが増加しているかのようになります。

私のコードは次のようになります。

/* Chrome, Safari, Opera */ 
 

 
@-webkit-keyframes zoom { 
 
    from { 
 
    -webkit-transform: scale(1, 1); 
 
    } 
 
    to { 
 
    -webkit-transform: scale(1.2, 1.2); 
 
    } 
 
} 
 
/* Standard syntax */ 
 

 
@keyframes zoom { 
 
    from { 
 
    transform: scale(1, 1); 
 
    } 
 
    to { 
 
    transform: scale(1.2, 1.2); 
 
    } 
 
} 
 
.homeDivParent { 
 
    height: 100%; 
 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(100, 100, 100, 0.1)), url("/assets/images/bgHome.jpg"); 
 
    background-position: 20% 0%; 
 
    background-color: #fafafa; 
 
    -webkit-animation: zoom 10s; 
 
    animation: zoom 10s; 
 
} 
 
.homeDivChild { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="homeDivParent"> 
 
    <div class="homeDivChild"> 
 
    Some Text 
 
    </div> 
 
</div>

Answer 1

私は右のそれをunterstand場合、私は知らないが、私は右、あなたはスクロールバーを削除したいと思いますか？

.homeDivParent { 
    overflow: hidden; 
}