Html 在Carousel引导中收缩图像宽度时遇到问题

在Carousel引导中，我在缩小图像的宽度时遇到了问题，因为每个图像都有一个固定的导航栏。每当我调整旋转木马中每个图像的大小时，旋转木马控件上一个/下一个图标的位置也会改变

例如，我希望每个图像的图像宽度大小为此，这样我可以看到旋转木马控件/上一个/下一个图标：

但由于某些原因，其他照片被放大显示，这使得图像像这样展开：

我尝试过调整“d-block w-___;”并从CSS进行调整，但没有任何效果

这是我的HTML：

  </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-80" src="Photos/mcdonalds.JPG" alt="First slide">
            <p>October, 2020. McDonald's at Main St., BC.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="Photos/statute.JPG" alt="Second slide">
            <p>June, 2020. Kelowna, BC.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block w-70" src="Photos/trees.JPG" alt="Third slide">
            <p>November, 2020. Bute St., BC.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="Photos/wall.JPG" alt="Forth slide slide">
            <p>October, 2019.Su-Won, Korea.</p>
          </div>

        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
</body>

---

尝试在代码中添加“最大宽度”属性，如下所示

.carousel-inner img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 60vw; */
    max-height: 530px;
    max-width: 500px;
}

---

您好，您能发布更多实际旋转木马的代码吗？

.carousel-inner img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 60vw; */
    max-height: 530px;
    max-width: 500px;
}