Bootstrap carousel that keeps the image aspect ratio
10,957
Add the following styles to the <img>
. This will keep the aspect ratio on large browsers.
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
Another option is to use <div>
's with background images and use background-size: cover
Author by
Fred30
Updated on June 07, 2022Comments
-
Fred30 almost 2 years
I have a bootstrap carousel on my website. I want to keep the image aspect ratio when resizing on smaller screens. How to do this?
Here's some code:
<!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="img/bg_good_sex2.jpg" class="img-responsive" alt="verslaafd-aan-porno-goede-seks"> <div class="container"> <div class="carousel-caption"> <h1>Sex Coach <span class="text-primary"> App </span></h1> <p>Krijg controle op porno- of seksverslaving</p> <p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/register.php" class="btn btn-lg btn-primary"><i class="icon-chevron-sign-right"></i> <?php echo START_BTN ?></a></p> <p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/survey_me.php" class="btn btn-success btn-primary btn-lg"><i class="icon-edit"></i> <?php echo BTN_SURVEY_ME ?></a></p> </div> </div> </div> </div> </div><!-- /.carousel -->
Thank you, Fred