Bootstrap Image Column Height Issue

Я создал сайт в бутстрапе, но борюсь с проблемой высоты, на двух столбцах. На странице контакта есть два столбца под картой. Левый - это изображение, а справа - какой-то текст, он бы любил его, если бы кто-то мог помочь мне получить его, чтобы они отвечали на одной высоте. Таким образом, левый и правый столбцы изменяются так же, как и привязка к полной ширине.Bootstrap Image Column Height Issue

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:[email protected]?Subject=Hey%20ReRaise">Send us an Email</a></p> 

        </div> 
       </div> 

        </div> 


     </div>

Вот CSS сопровождать 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; 
}

источник

2016-09-20 andy88jones

вы действительно должны включать в себя код, создав [MVCE] (http://stackoverflow.com/help/mcve) – giorgio

Извинения добавил его Теперь. – andy88jones

Попробуйте этот код:

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

источник

2016-09-20 08:30:12 Hiral

Я использовал это, и он почти исправил его, только что добавил min-width: 100%; Кажется, он работает. Благодаря Hiral – andy88jones

установить верхний свойство маржу в .CON-класса IMG к margin-top: 27px и set div, включая «say hello» margin-top: -106px

//code 

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

//div incluing say hello 

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

источник

2016-09-20 08:35:20

Найдено решение, которое не искажать:

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

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

источник

2016-09-20 09:56:54 andy88jones

Bootstrap Image Column Height Issue

ответ

Смежные вопросы