Bootstrap 图像列高问题答案

【问题标题】：Bootstrap Image Column Height IssueBootstrap 图像列高问题
【发布时间】：2016-09-20 17:56:54
【问题描述】：

我在 bootstrap 中创建了一个网站，但在两列中遇到了高度问题。在联系页面上，地图下方有两列。左边是图片，右边是一些文字，如果有人能帮我拿到它，他们会在相同的高度做出回应，我会很高兴。因此，左右列在对齐到全宽之前以相同的方式调整大小。

http://reraisedesign.com/contact-us.php

<div class="container-fluid" style="padding: 0; background: #fff;">

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 con-img">
                <img src="img/contact-us.jpg" width="100%"/>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 con-blurb">
                <div class="row">
                    <div class="col-xs-10 col-xs-offset-1">
                        <h1>Say Hello</h1>
                        <span class="line-left"></span>
                       <p>We would like to just thank you for taking the time to visit our site, if you would like hear more about ReRaise feel free to give us a call or drop us an email. We would love to hear about any potential projects or queries you may have and will always aim to respond the same day.</p>
                       <p class="con-dets">0151 705 3414</br>
                      <a href="mailto:info@reraisedesign.com?Subject=Hey%20ReRaise">Send us an Email</a></p>

                   </div>
                </div>

                    </div>


         </div>

这是伴随 HTML 的 CSS

.con-blurb{
padding-top:100px;
padding-bottom:100px;
}

.con-img{
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
height: 100%;
}


.con-blurb h1{
text-align: left;
}

【问题讨论】：

你真的应该通过创建MVCE来包含一些代码
抱歉添加了它。

标签： html twitter-bootstrap css

【解决方案1】：

试试这个代码：

.con-img img{
    height: 100%;
    max-width: 100%;
    width: auto;
}

【讨论】：

我用了这个，它几乎修复了它，只是添加了 min-width:100%;似乎有它的工作。谢谢希拉尔

【解决方案2】：

将 .con-img 类中的上边距属性设置为 margin-top:27px 并设置 div 包括“say hello” margin-top:-106px

//code

.con-img{
margin-top:27px;
}

//div incluing say hello

.div{
margin-top:-106px;
}

【讨论】：

【解决方案3】：

找到了一个不失真的解决方案：

.con-blurb{
   padding-top:100px;
}

.con-img img{
   display: block;
   max-width: 100vw;
   background-size: cover;
   height: 50vh;
   object-fit: cover;
 }

【讨论】：