Chrome 没有检测到引导轮播的自动高度答案

【问题标题】：Chrome not detecting auto height for bootstrap carouselChrome 没有检测到引导轮播的自动高度
【发布时间】：2018-02-21 13:42:15
【问题描述】：

.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;
}

我有上面的代码在调整大小时保持引导轮播的纵横比，但它不适用于 chrome。

网页是下一个：http://huertalia.mx/UniversidadesWP/site/index.html 如果您使用 safari 或 firefox 进行测试并调整屏幕大小，则可以正常工作。如果您使用 chrome，则轮播将无法正常工作。

这是轮播的html代码

  <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>

【问题讨论】：

标签： css html twitter-bootstrap google-chrome

【解决方案1】：

Display:flex 导致移动分辨率出现问题。我认为您可以从那里删除高度，因为它不需要并且轮播将根据窗口大小调整大小。我附上了屏幕截图，您可以在其中查看。让我知道它是否对您有帮助。我已经在 chrome 中测试过这个

【讨论】：