Bootstrap Image Column Height Issue - html

Question

I have made a website in bootstrap but struggling with a height issue, on two columns.
On the contact page there is two columns below the map. The left is an image and right is some text, would love it if someone could help me get it so they respond at the same height. So the left and right column resize the same way before snapping to full width.
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>
Send us an Email</p>
</div>
</div>
</div>
</div>
Here is the CSS to accompany the HTML
.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;
}

Answer 1

Try out this code:
.con-img img{
height: 100%;
max-width: 100%;
width: auto;
}

Answer 2

set the top margin property in .con-img class to margin-top:27px and set div including "say hello" margin-top:-106px
//code
.con-img{
margin-top:27px;
}
//div incluing say hello
.div{
margin-top:-106px;
}

Answer 3

Found a solution that didn't distort:
.con-blurb{
padding-top:100px;
}
.con-img img{
display: block;
max-width: 100vw;
background-size: cover;
height: 50vh;
object-fit: cover;
}