自舉圖像列高度問題

我在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:[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並設置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

自舉圖像列高度問題

回答

相關問題