在 Carousel Bootstrap 响应中制作常规图像和图像时遇到问题

Question

我很难使我的常规图像和轮播中的图像 Bootstrap 响应。搜索答案后，我已经尝试过设置 max-width: 100%, height: auto, display: block 反之亦然，但我仍然无法使图像响应...不确定问题出在哪里... .提前谢谢你。

这是我的 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" src="testing.JPG" alt="First slide">
            <p>October, 2020. McDonald's at Main St.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block" src="statute.JPG" alt="Second slide">
            <p>June, 2020. Kelowna, BC.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block" src="trees.JPG" alt="Third slide">
            <p>November, 2020. Bute St., BC.</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>
    <div class = "main_car">
        <img src="main_car.jpg" alt="car">
        <p>June, 2020. Sunshine Coast, BC, Canada </p>
    </div>

这是我的 CSS:

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

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

.main_car {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.main_car img {
    display: block;
    max-width: 100%;
    height: auto;
}

Answer 1

您可以将图像宽度设置为 vw（视图宽度），以便在屏幕变小时进行调整。当然高度也会改变:

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

Answer 2

将 class="img-fluid" 添加到您的 <img> 标签

并将CSS添加到：

.carousel-inner img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /** new style */
    max-width: 100%;
    height: auto;
}

在 Carousel Bootstrap 响应中制作常规图像和图像时遇到问题

Having trouble making regular image and images in Carousel Bootstrap responsive

html

css

image

carousel

responsive