如何使用transform scale删除屏幕上显示的滚动条?

我正在尝试开发一个图像滑块。我希望图像放大,直到下一个图像接管发生。我当前正在使用“transform scale”属性。它溢出宽度并导致显示滚动条。如何删除此滚动条?

HTML:

<div id="pn-head">
</div>

JS:

        var i = 1;
        function tSlide(){
            if(i<=5){
                jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
            }
            i = i+1;
            if(i==6){
                i=1;
            }
        }
        tSlide();
        setInterval(tSlide , 5000);

CSS:

.pn-head{
    height: 700px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    -webkit-transition: transform 2s ease-out 1s;
    -moz-transition: transform 2s ease-out 1s;
    -o-transition: transform 2s ease-out 1s;
    transition: transform 2s ease-out 1s;
}
.head-bg1{
    background: url('../img/b1.png');
    transform: scale(1.1);
}
.head-bg2{
    background: url('../img/b2.png');
    transform: scale(1.2);
}
.head-bg3{
    background: url('../img/b3.png');
    transform: scale(1.3);
}
.head-bg4{
    background: url('../img/b4.png');
    transform: scale(1.4);
}
.head-bg5{
    background: url('../img/b5.png');
    transform: scale(1.5);
}