Question

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

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

如何保持纵横比并将图像居中放置在各自的列中，每个图像的中心位置不同。

   <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

得到了一个充分的解决方案，不是完美而是简单。我将图像的父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>

对齐图像中心并保留纵横比

1 个答案: