Bootstrap carousel fit screen width and height – Twitter bootstrap

I’m using the twitter-bootstrap feature carousel for a slider.
basically my homepage will be just a big slider with a nav bar and footer.
I was wondering if there’s a way to make the slider fit the screen without the image to stretch ?

To be more specific I want the slider to fit the windows browser width and height without having to sacrifice my image aspect ratio. with my current code the slider fits the screen perfectly but the image is not adjusting it’s self as it’s trying to keep aspect ratio

See my JSFiddle for a clear idea of what’s happening; I also pasted the code below.

HTML

            <!-- Wrapper for Slides -->
            <div class="carousel-inner">

                <!-- Slide 1 -->
                <div class="item active">
                    <img class="fill" src="https://s16.postimg.org/5qy7h0v2d/Desert.jpg" alt="" />
                    <div class="carousel-caption">
                      <h3>Chicago</h3>
                      <p>Thank you, Chicago - A night we won't forget.</p>
                    </div>
                </div>

                <div class="item">
                    <!-- Slide 2 -->
                    <img class="fill" src="https://s11.postimg.org/d7rsly7xb/Hydrangeas.jpg" alt=""  />
                    <div class="carousel-caption">
                    </div>
                </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="icon-prev"></span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="icon-next"></span>
            </a>
        </div>
    </div>

CSS

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

html, body {
      width: 100%;
      height: 100%;
    overflow: hidden;
}

.test {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: auto;
}