Chrome无法检测到自举轮播的自动高度

Question

.carousel .carousel-inner .carousel-item img {
  width: 100%;
  height: auto;
}

.carousel .carousel-inner .carousel-item .carousel-img {
  width: 100%;
  height: 400px;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-color: red;
}

I have the code above to mantain aspect ratio of a bootstrap carousel on resize, but it doesn't work for chrome.

The webpage is the next one: http://huertalia.mx/UniversidadesWP/site/index.html If you make tests using safari or firefox and resize your screen will work fine. If you use chrome the carousel is not going to work correctly.

Here is the html code for the carousel

  <div style="width: 100%;" id="carouselDocumentationIndicators" class="carousel slide hidden-xs-down" data-ride="carousel">
<div class="carousel-inner" role="listbox">
  <div class="carousel-item active">
    <img class="d-block img-fluid" src="assets/img/index/carousel/1_2.jpg" alt="First slide">
    <div class="carousel-caption left-caption text-left">
      <h4 style="padding-left: 30px;" id="prof-click">SOY UNIVERSITARIO</h4>
    </div>
  </div>
  <div class="carousel-item">
    <img class="d-block img-fluid" src="assets/img/index/carousel/2_2.jpg" alt="Second slide">
    <div class="carousel-caption left-caption text-left">
      <h4 style="padding-left: 30px;" id="prof-click">SOY PROFESIONISTA</h4>
    </div>
  </div>
  <div class="carousel-item">
    <img class="d-block img-fluid" src="assets/img/index/carousel/3_2.jpg" alt="Third slide">
    <div class="carousel-caption left-caption text-left">
      <h4 style="padding-left: 30px;" id="prof-click">SOY EMPRENDEDOR</h4>
    </div>
  </div>
</div>

Answer 1

Display:flex is causing issue for mobile resolution. I think you can remove height from there s it is not needed and carousel will resize according to window size. I have attached screenshot where you can check. let me know if it is helpful to you. I have tested this in chrome