Бэкграунд картинка на половину.

Всех приветствую ! Проблема такая

картинка для фона на половину отображается и даже

меньше чем на половину помогите разобраться

вот код :

<header class="header">

 

        <div id="slides">

            <div class="slide showing"></div>

            <div class="slide"></div>

            <div class="slide"></div>

          </div>

            <div class="arrow-left"  id="previous">

                    <img src="H:\OpenServer\OSPanel\domains\site-maket\img\left.png" alt="arrow-left">

            </div>

 

            <div class="arrow-right"  id="next">

                    <img src="H:\OpenServer\OSPanel\domains\site-maket\img\right.png" alt="arrow-right">

            </div>

         </header>

.header{

/*  background: url('img/bg-head.jpg') no-repeat top center / cover;*/

    height: 100vh;

    max-height: 100vh;

    position: relative;

}

#slides{

    height: 100vh;

    padding: 0px;

    margin: 0px;

    width: 100vh;

    position: absolute;

    z-index: -1;

}

 

.slide{

    position: absolute;

    left: 0px;

    top: 0px;

    opacity: 0;

 

    -webkit-transition: opacity 1s;

    transition: opacity 1s;

}

 

.showing{

    opacity: 1;

    z-index: 4;

}

 

 

.slide{

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    color: #fff;

}

 

.slide:nth-of-type(1){

    background: url('img/bg-head.jpg') no-repeat top center / cover;

    width: 100vh;

    height: 100vh;

}

.slide:nth-of-type(2){

 background: url('../slide.jpg') no-repeat;

    width: 100vh;

    height: 100vh;

}

.slide:nth-of-type(3){

 background: url('../slide2.jpg') no-repeat;

    width: 100vh;

    height: 100vh;

}

 

.arrow-left {

  position: absolute;

  z-index: 99;

  top: 50%;    

  left: 5%;

  -webkit-transform: translate(-1%, -50%);

  transform: translate(-1%, -50%);

}

.arrow-right {

  position: absolute;

  z-index: 99;

  top: 50%;

  right: 5%;

  -webkit-transform: translate(-1%, -50%);

  transform: translate(-1%, -50%);

}

<script type="text/javascript">

 

 

            var slides = document.querySelectorAll('#slides .slide');

            var currentSlide = 0;

 

            function nextSlide(){

                goToSlide(currentSlide+1);

            }

 

            function previousSlide(){

                goToSlide(currentSlide-1);

            }

 

            function goToSlide(n){

                slides[currentSlide].className = 'slide';

                currentSlide = (n+slides.length)%slides.length;

                slides[currentSlide].className = 'slide showing';

            }

            var next = document.getElementById('next');

            

            var previous = document.getElementById('previous');

 

            next.onclick = function(){

                

                nextSlide();

            };

            previous.onclick = function(){

                

                previousSlide();

            };

 

        </script>

Эти перелистывания работают, только на половину отображается

вот еще просто бэкграунд без js