需要圖像高度

我想左側背景將採取等高的右側區域area.I試圖解決這個問題在很多方面使用填充，高度。但是當我調整屏幕的大小不保持適合。需要圖像高度

HTML：

<div class="s3-left col-sm-8"> 
    <a href="#"><img src="images/logo4.png" alt="logo" class="img-responsive center-block"/></a> 
</div>

CSS：

.s3-left { 
    background: url("images/background2.jpg") no-repeat 0 0/100% 100%;  
} 
.s3-left img { 
    width: 92px; 
}

來源

2015-08-15 Tanvir Rahman

能否請您使用嵌入式StackOverflow的片段或者最好的jsfiddle提供一個工作示例（或在網上把你的代碼的其他地方），所以我們可以測試它嗎？如果沒有能夠看到你的代碼，很難說出錯。 –

我不喜歡在線代碼編輯器。你可以到這個鏈接瞭解更多細節。 [點擊這裏]（http://stackoverflow.com/questions/32017710/background-image-is-creating-unnecessary-gap-at-different-screen-size-in-differe） –

這將是有益的，如果你上傳照片（個別） –

您可以使用柔性盒設置display: flex等於兩個區域的高度，並設置background: cover到.s3-left

.section-three .s3-left.col-sm-8 { 
 
    padding-left: 0 !important; 
 
    padding-right: 0 !important; 
 
} 
 
.my-container{ /*added this class to div.row*/ 
 
    display: flex; /*used to equal the height of both areas*/ 
 
} 
 
.s3-left { 
 
    background: url("http://lsst.astro.washington.edu/intro/imsim/images/ImageSimNoBackgroundSmall.png"); 
 
    background-size: cover; /*using cover to fit all area*/ 
 
} 
 
.s3-left img { 
 
    width: 92px; 
 
    padding: 199px 0; 
 
} 
 
.s3-image img { 
 
    width: 100%; 
 
} 
 
.s3-logo { 
 
    padding: 48px 0 25px; 
 
} 
 
.s3-heading h5 { 
 
    margin: 0; 
 
    padding: 0 0 10px; 
 
} 
 
.s3-description .gap { 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 
.s3-description p { 
 
    font-size: 12.4px; 
 
    padding-bottom: 58px; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="section-three"> 
 
    <div class="container-fluid"> 
 
     <div class="row my-container"> <!--added the class my-container--> 
 
      <!---------------------- Left-Area -------------------> 
 
      <div class="s3-left col-sm-8"> 
 
       <a href="#"><img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt="logo" class="img-responsive center-block"/></a> 
 
      </div> 
 
      <!-----------------------Right-Area -------------------> 
 
      <div class="s3-right col-sm-4"> 
 
       <div class="container-fluid"> 
 
        <div class="s3-right-up row"> 
 
         <div class="container-fluid"> 
 
          <div class="s3-logo row"> 
 
           <a href="#" target="_self"> 
 
            <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt="logo" class="img-responsive center-block" style="width:32px; height:auto;"/> 
 
           </a> 
 
          </div> 
 
          <div class="s3-heading row"> 
 
           <h5 class="text-uppercase text-center"> Vintage oliva </h5> 
 
          </div> 
 
          <div class="s3-description row"> 
 
           <div class="gap"> 
 
            <p class="text-justify"> 
 
             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived. 
 
            </p> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="s3-right-down row"> 
 
         <div class="container-fluid"> 
 
          <div class="s3-image row"> 
 
           <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt="logo" class="img-responsive"/> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

檢查它在整頁

Check this for more info about flexbox

來源

2015-08-15 07:31:04

Thanks.Thanks很多，我以無數次的方式嘗試過它......但失敗了。現在的問題已由您解決。感謝您的幫助...... :) @Yandy_Viera –

我很高興來幫你 –

需要圖像高度

回答

相關問題