Flexbox轮播在移动设备上的大小不正确

Question

我正在为客户建立一个网站，并在this tutorial之后制作了一个轮播。一切都可以在台式机上很好地缩放，但是在移动设备上，轮播会失去它的比例并变得捉襟见肘。

HTML

<div class="carousel-container">
        <i class="fas fa-angle-right" id="nextBtn"></i>
        <i class="fas fa-angle-left" id="prevBtn"></i>
        <div class="carousel-slide">
            <img src="image4.jpg" id="lastClone" alt="">
            <img src="images1.jpg" alt="">
            <img src="images2.jpg" alt="">
            <img src="images3.jpg" alt="">
            <img src="images4.jpg" alt="">
            <img src="images1.jpg" id="firstClone" alt="">
        </div>
    </div>

CSS

.carousel-container{
    width: 100%;
    height: auto;
    margin: auto;
    overflow: hidden;
    position: relative;
}
.carousel-slide{
    display: flex;
    width: 100%;
    height: auto;
}
.carousel-slide img{
    width: 100%;
    height: auto;
}
#prevBtn {
    position: absolute;
    top: 50%;
    z-index: 10;
    left: 1%;
    font-size: 2em;
    color: gray;
    opacity: 0.5;
    cursor: pointer;
    transition: color 0.5s, opacity 0.5s;
    -webkit-transition: color 0.5s, opacity 0.5s;
    -moz-transition: color 0.5s, opacity 0.5s;
    -ms-transition: color 0.5s, opacity 0.5s;
}
#nextBtn {
    position: absolute;
    top: 50%;
    z-index: 10;
    left: 98%;
    font-size: 2em;
    color: gray;
    opacity: 0.5;
    cursor: pointer;
    transition: color 0.5s, opacity 0.5s;
    -webkit-transition: color 0.5s, opacity 0.5s;
    -moz-transition: color 0.5s, opacity 0.5s;
    -ms-transition: color 0.5s, opacity 0.5s;
}
#prevBtn:hover, #nextBtn:hover {
    color: white;
    opacity: 1;
}

每个图像都具有相同的宽高比，并且所有heigt属性都设置为auto，因此我不会覆盖宽高比。该轮播会在桌面上正确显示并缩放，但在移动设备上无法正确显示和缩放。我包含了meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

如果需要，我可以提供网站链接。