Make Bootstrap Carousel Responsive on Height

bootstrap how to make a fixed height responsive?

You can use css3 object-fit for resizing your image http://jsfiddle.net/xcoq9xxg/

img {
    height: 650px;
    width: 100%;
    object-fit: cover; // here
}

It works for Chrome and Opera. Use polyfill library for others: https://github.com/schmidsi/jquery-object-fit or https://github.com/anselmh/object-fit.

---

Another way is to use css3 background-size http://jsfiddle.net/dizel3d/rwdspudv/

.image {
    height: 650px;
    background-position: center;
    background-size: cover;
}

It works in all modern browsers without javascript, but you need to use <div> instead of <img>:

<div class="image" style="background-image: url('my-image.jpg')"></div>

fixed height and width for responsive bootstrap carousel

Try this method to add different sized images, to view in fixed height:500px

.carousel-inner .item{height:500px;background-size:cover;background-position: center center;}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <br>  <div id="myCarousel" class="carousel slide" data-ride="carousel">    <!-- Indicators -->    <ol class="carousel-indicators">      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>      <li data-target="#myCarousel" data-slide-to="1"></li>      <li data-target="#myCarousel" data-slide-to="2"></li>      <li data-target="#myCarousel" data-slide-to="3"></li>    </ol>
    <!-- Wrapper for slides -->    <div class="carousel-inner" role="listbox">      <div class="item active" style="background-image: url(//placehold.it/1024x700)  ">      </div>
      <div class="item" style="background-image: url(//placehold.it/100x100)  ">      </div>
      <div class="item" style="background-image: url(//placehold.it/1024x700)  ">      </div>
      <div class="item" style="background-image: url(//placehold.it/200x200)  ">      </div>    </div>
    <!-- Left and right controls -->    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>      <span class="sr-only">Previous</span>    </a>    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>      <span class="sr-only">Next</span>    </a>  </div></div>

fixed height and width for responsive bootstrap carousel

Try this method to add different sized images, to view in fixed height:500px

.carousel-inner .item{height:500px;background-size:cover;background-position: center center;}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <br>  <div id="myCarousel" class="carousel slide" data-ride="carousel">    <!-- Indicators -->    <ol class="carousel-indicators">      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>      <li data-target="#myCarousel" data-slide-to="1"></li>      <li data-target="#myCarousel" data-slide-to="2"></li>      <li data-target="#myCarousel" data-slide-to="3"></li>    </ol>
    <!-- Wrapper for slides -->    <div class="carousel-inner" role="listbox">      <div class="item active" style="background-image: url(//placehold.it/1024x700)  ">      </div>
      <div class="item" style="background-image: url(//placehold.it/100x100)  ">      </div>
      <div class="item" style="background-image: url(//placehold.it/1024x700)  ">      </div>
      <div class="item" style="background-image: url(//placehold.it/200x200)  ">      </div>    </div>
    <!-- Left and right controls -->    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>      <span class="sr-only">Previous</span>    </a>    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>      <span class="sr-only">Next</span>    </a>  </div></div>

Bootstrap carousel width and height

Are you trying to make it responsive? If you are then I would just recommend the following:

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  max-height: 200px !important;
}

However, the best way to handle this responsively would be thru the use of media queries like such:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

How adjust bootstrap carousel height?

Hi you can add this Stylesheet i've tried in your website with inspect element it's worked!

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .carousel-inner {
    height: 400px;
}

.carousel-item, .carousel-item img {
    height: 400px;
  width:100%;
}

} 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 767px) {
    .carousel-inner {
    height: 160px;
}

.carousel-item, .carousel-item img {
    height: 160px;
  width:100%
}
}

Here is Result

---

Related Topics