.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.