2017-09-13 28 views
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> 

回答

0

Display:flex是造成問題的解決手機的HTML代碼。我認爲你可以從那裏刪除高度,這是不需要的,旋轉木馬會根據窗口大小調整大小。我已附上截圖,你可以檢查。讓我知道它是否對你有幫助。我已經在鉻enter image description here