I'm looking to create a carousel using bootstrap. I want the images (that have different width and height) to be displayed with a fixed ratio, . Everything I try with CSS breaks and the image ratio breaks and inherit the size of the carousel.

CSS

```
.carousel .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 702px;
max-width: none;

```

}

the html code :

```
<div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="active item">
        <img src="image1.jpg"/>
        </div>
        <div class="item">
        <img src="image1.jpg"/>
        </div>
      </div>
    </div>

```

Should i look for another carousel solution that keeps images' ratio or there is a workaround ?

**EDIT 1 :**

```
    .carousel .item > img {
      max-width: 100%;
      height: 100%;
      width: auto;
      text-align: center;
      margin: 0 auto;

    }

```