我有一个宽度为90%设备宽度的幻灯片，图像也应该是相同的宽度（100%的父母），它在桌面上完美工作，但在移动的上不行。

即使在桌面上调整浏览器窗口的大小，幻灯片也会随着窗口缩放（高度和宽度都正确缩放），但在移动的浏览器上（即使选择“桌面模式”选项），幻灯片中包含的图像太大（幻灯片中的div大小正确，但图像本身太宽（大约是设备宽度的5倍）。我不知道为什么会发生这种情况，因为在桌面上，即使将浏览器窗口大小调整为较小的宽度，它也能完美地工作。
幻灯片内的图像（具有class .slideImg）的宽度被设置为其父级的100%，其父级是具有class .slidewrapper的div，其宽度是其父级的90%，其父级是具有class .slideDiv的div（其宽度被设置为'device-width'）。
我做错了什么？为什么幻灯片中的图像在移动的上不能正确调整大小？
PS：此外，图像的宽度是正确的（至少在桌面上），但图像在高度上被拉伸（与原始图像相比宽高比发生了变化），我不明白为什么，因为我只为这些图像设置了宽度，而没有为它们或它们的父div设置任何高度值。如果有人知道，请让我知道为什么，我做错了什么。
幻灯片的HTML：

/* slideshow styles */
.slideDiv{
  width: device-width; /* set width of slideshow to device's width */
}

.slideContainer{
  width:90%; /* 90% of parent(slideDiv) width = 90% of 'device-width' */
  position:relative;
  overflow: hidden;
  z-index: 999;
  margin:auto;
  margin-top:1vh;
}
.slideWrapper{
  width:1200%; /* 12*100% because the slideshow contains 12 images, each of 100% width of the .slideContainer class */
  display: flex;
  animation: slide 100s infinite;
}

.slideImg{
  width: 100%; /*100% of parent which is 100% of slidecontainer = 90% of 'device width'*/

}

<!-- auto slideshow start -->
<div class="slideDiv">
  <div class="slideContainer">
    <div style="align-self:center; justify-self:center;" class="col-12 col-lg-8 text-   center centeredText">
      <!-- <h5 class="text-white text-uppercase mb-3 animated slideInDown">Welcome To    <mark>Troos</mark></h5>
      <h1 class="display-3 text-white animated slideInDown mb-4"><span>Recreational, Off-Grid & <br>Tiny Homes</span></h1>
      <p class="fs-5 fw-medium text-white mb-4 pb-2"><mark style="background-color:rgba(0, 0, 0, .0); color:white;">We realise your custom dream house, from planning to final delivery</mark></p> -->
      <a href="#projects" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft" style="color:black;font-size:1.5em; background-color:rgba(238, 238, 238, 0.705)">See Projects &nbsp; <i class='fas fa-arrow-down'></i></a>

      <!-- <a href="" class="btn btn-light py-md-3 px-md-5 animated slideInRight">Free Quote</a> -->
    </div>
    <div class="slideWrapper">
      <!-- 1 -->
      <img src="img/about page 1/Ijs1/af1 aangepast.png" class="slideImg">
      <!-- 2 -->
      <img src="img/about page 1/Apeldoorn/apeldoorn_glas_warm_landing.png" class="slideImg">
      <!-- 3 -->
      <img src="img/about page 1/Hanne/hanne_1_landing.png" class="slideImg">
      <!-- 4 -->
      <img src="img/about page 1/Apeldoorn/big_portfolio_item_1.png" class="slideImg">
      <!-- 5 -->
      <img src="img/about page 1/Christiaan/Christiaan1.jpeg" class="slideImg">
      <!-- 6 -->
      <img src="img/about page 1/Ijs2/ijsselmuiden2.png" class="slideImg">
      <!-- 7 -->
      <img src="img/about page 1/Apeldoorn/apeldoorn1.png" class="slideImg">
      <!-- 8 -->
      <img src="img/about page 1/Hanne/hanne_1_licht.png" class="slideImg">
      <!-- 9 -->
      <img src="img/about page 1/epe/epeLanding.png" class="slideImg">
      <!-- 10 -->
      <img src="img/about page 1/Ijs1/ijsselmuiden1_2_landing.png" class="slideImg">
      <!-- 11 -->
      <img src="img/about page 1/apeldoorn/apeldoornBosLanding.png" class="slideImg">
      <!-- 12 -->
      <img src="img/about page 1/tekening.png" class="slideImg">
    </div>
  </div>
</div> <!-- end slideDiv div -->

<!-- auto slideshow end -->

网站在这里在线：troosbouw.com
Git repo：https://github.com/MaartenDominicus/TroosCom（问题中的代码来自index.html文件）
谢谢！