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

【问题标题】：Align image center and retain aspect ratio对齐图像中心并保持纵横比
【发布时间】：2023-03-22 14:28:02
【问题描述】：

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

问题：图像似乎被倾斜以减小它们的宽度而不是它们的高度，或者实际上没有拉伸到它们可能的最大尺寸。

如何保持纵横比并将图像居中放置 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>

CSS

.row-topspace {
    padding-top: 2%;
}

.row-bottomspace {
    padding-bottom: 2%;

.sitetext {
    color: white;
    font-family: 'Cooper Black';
    font-size: 17px;
}

【问题讨论】：

尝试添加高度：自动；对 .img 响应。这是假设您不需要图像在其父级中垂直对齐。
谢谢，我应该在哪里添加这个？
也许 this answer 是你要找的东西 :) See this DEMO 请。
不，这没有任何作用，也没有解决图像居中问题
您可以包含您的 css 还是仅使用引导 css？

标签： html css twitter-bootstrap

【解决方案1】：

得到了一个适当的解决方案，虽然不完美但很简单。我将图像的父 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>

【讨论】：