HTML / CSS图像缩放留下空白

Question

我正在尝试将图片库缩放到我网站的其他部分，但无论何时缩小，都会在图库图片的位置留下一个空白区域。

<div style="position: relative;
            background-repeat: no-repeat;
            background-color: black;
            height:100%;">

    <div class="slider" id="main-slider">
        <div class="slider-wrapper">
            <img style="height:auto;width:100%;" src="style/slides/img1" alt="First" class="slide"/>
            <img style="height:auto;width:100%;" src="style/slides/img2" alt="Second" class="slide"/>
            <img style="height:auto;width:100%;" src="style/slides/img3" alt="Third" class="slide"/>
            <img style="height:auto;width:100%;" src="style/slides/img4" alt="Fourth" class="slide"/>
            <img style="height:auto;width:100%;" src="style/slides/img5" alt="Last" class="slide"/> 
        </div>
    </div>
</div>

CSS：

    .slider {
    height: auto;width:100%;
    margin: 2em auto;
    position:absolute;  
}

.slider-wrapper {
    height: auto;width:100%;
    position: absolute;
}

.slide {
    position: absolute;
    height: auto;width:100%;
    opacity: 0;
    transition: opacity 6s linear;
}

.slider-wrapper > .slide:first-child {
    opacity: 1;
}

所有图片均为1920x1080