0
.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。Chrome未檢測自舉輪播的自動高度
該網頁是下一個:http://huertalia.mx/UniversidadesWP/site/index.html 如果你使用safari或firefox進行測試,並調整屏幕的大小將工作正常。如果您使用chrome,則傳送帶無法正常工作。
下面是旋轉木馬
<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>