How to make bootstrap corousal responsive - css

Question

I am making bootstrap corousal of full width and height,The height is responsive but the width is not responsive (i.e) when i resize the window the image starts crop according to the width of the viewport,when it reaches to mobile screen size the left part the corousal crops,Below is the Bootstrap and css code,Can anyone help hoe to make image width responsive,Thanks
<header id="myCarousel" class="carousel slide">
<!-- 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>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/corousal1.jpg');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/corousal2.jpg');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/corousal1jpg.jpg');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/corousal4.jpg');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</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 class="drbatras-logo">
<img src="images/logo.png" alt="logo"/>
</div>
</header>
CSS
html,
body {
height: 100%;
}
.carousel,
.item,
.active {
height: 100%;
position: relative;
}
.carousel-inner {
height: 100%;
}
/* Background images are set within the HTML using inline CSS, not here */
.drbatras-logo{
position: absolute;
top:60px;
right: 170px;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

Answer 1

you can use <img> tag and set class="img-responsive"
<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345">

Answer 2

you can use this
<div class="fill" id="fill"> </div>
css
#fill{
background:url('images/corousal1.jpg') no-repeat center center;
background-size:100% auto;
}