Html 对齐图像中心并保持纵横比

我有一组图像，我想从中创建一组带有标题的按钮。到目前为止，我的尝试如下

问题：图像似乎是倾斜的，以减少其宽度而不是高度，或者确实没有延伸到最大尺寸

如何保持纵横比并将图像居中放置在各自列中的3张不同大小的图像中

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

---

得到了一个充分的解决方案，不是完美的，而是简单的。我将图像的父div设置为class=“thumbnail”，通过结果将图像居中，而不会扭曲图像。如果任何人有一个仅css的方法，则我会将其答案设置为更正

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

联系我们
我们的画廊
访问我们的Facebook页面

得到了一个适当的解决方案，不是完美的，但很简单。我将图像的父div设置为class=“thumbnail”，通过结果使图像居中，而不会扭曲图像。如果任何人有一个css唯一的方法，然后我会设置他们的答案正确

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

联系我们
我们的画廊
访问我们的Facebook页面

尝试添加高度：自动；到。img响应。这是假设你不需要图像在它的parent.thx中垂直对齐，我应该将其添加到哪里？可能是你正在寻找的：）请。不，这不起任何作用，也不能解决图像居中问题。你可以包含css还是只使用引导css？尝试添加高度：auto；到。img响应。这是假设你不需要图像在它的parent.thx中垂直对齐，我应该将其添加到哪里？可能是你想要的：）请。不，这不起任何作用，也不能解决图像居中问题。你可以包含你的css，或者你只是在使用引导css吗？