Bootstrap carousel image height change according to sm md sx lg - twitter-bootstrap-3

Question

The issue is quality of image at smaller screens i.e 320px 375px 425px gets blur as i mention height in the class.. I am mentioning the height as i want the image to fit screen initially without user needing to scroll down to look for further information
My question here is should i resize the image so that it has quality in it..
Am sharing my code
CSS
'
.carousel{
background-color: #2f4357;
}
.carousel .item img{
margin: 0 auto;
height:570px;/* Align slide image horizontally center */
}
.bs-example{
margin: 20px;
}
'
html
'
<div class="row">
<div class="col-md-12">
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="images/aa.jpg" alt="First Slide">
</div>
<div class="item">
<img src="images/aa.jpg" alt="Second Slide">
</div>
<div class="item">
<img src="images/aa.jpg" alt="Third Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div><!-- /.col-md-8 -->
</div> <!-- /.end carousel row -->
'

Answer 1

You do not need to set any height or width to images in Bootstrap carousel if you are using them as img source. You need to add height only if you are using them as a background image. For this, you need to add height to .item class and set the background properties for the same.