html - How to make bootstrap carousel image responsive?

Question

I want to keep the same ratio of the images. The problem is it streches when the browser is wide. and squezes when it's reduced.

I have checked all SO question here but most of them did not help me.

Here is the markup:

<!-- Carousel
================================================== -->
<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>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/female/IMG_5053-2.jpg" 
           data-src="images/female/IMG_5053-2.jpg" alt="First slide">

---

and here is the CSS

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

I tried to make a jsfiddle but I couldnt here is the link to the page http://maanastore.com/home.php

Answer 1

Remove the following CSS rules from respective files:

In home.php file

.carousel .item>img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

in carousel.css

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

Also, add margin-top: 51px; to .carousel class in carousel.css file and remove height:500px from the same class, because you have fixed navbar.