Align image center and retain aspect ratio - html

Question

I have a set of images that i want to create a set of buttons with titles from. My attempt so far is below....
Issue: the images seem to be skewed to reduce their width but not their height or indeed not stretch to their max size possible.
How can i keep the aspect ratio and center the image for 3 images each in their own column and of different sizes.
<div class="row row-bottomspace">
<div class="col-md-8 col-md-offset-2">
<!--carouselstart-->
<div class="feature">
<div class="col-md-4 text-center">
<div class="row text-center">
<img src="img/home/contactus.png" alt="residential image not available" class="img-responsive">
<h3 class="sitetext">Contact us</h3>
</div>
</div>
<div class="col-md-4">
<div>
<img src="img/home/gallery.png" alt="residential image not available" class="img-responsive">
<h3 class="sitetext">Our Gallery</h3>
</div>
</div>
<div class="col-md-4">
<div>
<img src="img/home/facebook.png" alt="residential image not available" class="img-responsive">
<h3 class="sitetext">Visit our Facebook page</h3>
</div>
</div>
</div>
</div>
</div>
CSS
.row-topspace {
padding-top: 2%;
}
.row-bottomspace {
padding-bottom: 2%;
.sitetext {
color: white;
font-family: 'Cooper Black';
font-size: 17px;
}

Answer 1

got a adequate solution, not perfect but simple. I set the parent div of the image to class="thumbnail" which by result centers the image" without distorting it. If anybody has a css only method then il set their answer to correct....
<div class="row row-bottomspace">
<div class="col-md-8 col-md-offset-2">
<!--carouselstart-->
<div class="feature">
<div class="col-md-4 text-center sitetext">
<div class="thumbnail siteImageButton">
<img src="img/home/contactus.png" alt="residential image not available" class="img-responsive">
<h3>Contact us</h3>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail siteImageButton">
<img src="img/home/gallery.png" alt="residential image not available" class="img-responsive">
<h3>Our Gallery</h3>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail siteImageButton">
<img src="img/home/facebook.png" alt="residential image not available" class="img-responsive">
<h3>Visit our Facebook page</h3>
</div>
</div>
</div>
</div>
</div>