背景大小：封面與背景大小：包含

這是我需要用我的HTML/CSS實現的內容，文本應該始終位於綠色容器內，無論屏幕大小如何。背景大小：封面與背景大小：包含

這是我的HTML：

<section id="aboutprocess"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-8 col-md-offset-2"> 
        <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements. 
        </p> 
        <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button> 
       </div> 
       <!--end col-md-8 col-md-offset-2--> 
      </div> 
      <!--end row --> 
     </div> 
     <!--end container--> 
    </section> 
    <!--end aboutprocess-->

爲了達到這個觀點，我用background-size: contain + flexbox：

#aboutprocess { 
     background: url("../img/tech_bg.png") no-repeat left top; 
     width: 100%; 
     height: 588px; 
     background-size: contain; 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-align: center; 
     -ms-flex-align: center; 
     align-items: center; 
    } 

    #aboutprocess p { 
     color: #ffffff; 
    }

當我調整窗口的大小時，文字落在外面：

當我使用background-size cover，綠色背景圖像不顯示原始形狀的任何更多：

我怎麼能使其發揮作用，這個綠色的背景保持其形狀和文字巋然不動此背景垂直和水平對齊。

這是鏈接to the demo page。

謝謝你的幫助。

來源

2016-12-01 bijoume

使用含有除去固定的高度，並使用％，而非保持比例......但無論如何，在某些時候IMG合作太小，不能保持你想要的佈局 – DaniP

，你有你的容器一定高度的問題引起的 - 它需要保持背景圖像的長寬比正常工作

使用padding css ratio hack，你可以得到的容器，以保持寬高比然後相應地定位該行：

#aboutprocess { 
 
    background: url("http://dolm.ragne.me/img/tech_bg.png") no-repeat left top; 
 
    width: 100%; 
 
    background-size: cover; 
 
} 
 
#aboutprocess .container { 
 
    padding-top: 32.6316%; 
 
    position:relative; 
 
} 
 
#aboutprocess .row { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content:center; 
 
} 
 
#aboutprocess .col-md-8 { 
 
    color: #ffffff; 
 
    text-align:center; 
 
}

<section id="aboutprocess"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2"> 
 
     <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements. 
 
     </p> 
 
     <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button> 
 
     </div> 
 
     <!--end col-md-8 col-md-offset-2--> 
 
    </div> 
 
    <!--end row --> 
 
    </div> 
 
    <!--end container--> 
 
</section>

來源

2016-12-01 14:11:15 Pete

謝謝你，作品像一個魅力。 :) – bijoume

不客氣，很高興我可以幫助:) – Pete

背景大小：封面與背景大小：包含

回答

相關問題