Bootstrap carousel fit screen width and height - html

Question

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;
}

Answer 1

Just if someone else might run into the same issue, I found a way to fix my slider.
I basically downloaded the Materialize plugin at the link below. All the information are included on their site, all you have to do is follow the instruction for the full screen slider which is located under javascrip, media.
http://materializecss.com/
Also here is an updated version of my JSFiddle in case someone might want to look and test the end result; I also past the code under.
HTML
<div class="slider fullscreen">
<ul class="slides">
<li>
<img src="https://unsplash.imgix.net/photo-1414924347000-9823c338079b?q=75&fm=jpg&s=0fa6db3cdc65e50c111575043fad4b5c"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
JAVASCRIPT
$(document).ready(function(){
$('.slider').slider({full_width: true});
});

Answer 2

use !important :
.fill {
width: 100%;
height: 100%!important;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
https://jsfiddle.net/grnsyx0x/1/

Answer 3

Use this in your code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://stuffpoint.com/apple/image/20832-apple-blue-apple.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>