Блог

У меня возникли проблемы с уменьшением ширины изображений в начальной загрузке Carousel при наличии фиксированной панели навигации для каждого изображения. Всякий раз, когда я настраиваю размер каждого изображения в 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>
 

Вот мой CSS:

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

}

.carousel-inner p {
    text-align: center;
    color: white;
    font-size: 14px;
}
 

Попробуйте добавить свойство max-width в свой код следующим образом,

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