2017-08-02 50 views
1

我想安排一個頭的佈局像在圖像上的一個enter image description here對齊文本和保護IMG長寬比

我想的背景圖像,以保持寬高比爲每一個屏幕尺寸和文字浮動在底部留下一些餘量。我有以下以下,但問題是,文本在一些斷點去下面的圖像或太接近底部

CSS

.header { 
    background-size:100%; 
    background-repeat:no-repeat; 
    overflow:hidden; 
    height:100%; 
    color: $dark; 
    .summary{ 
    text-align:left; 
    margin-top:30%; 
    margin-bottom:5%; 
    margin-left:triple($spacing-unit); 
    hr { 
     position: relative; 
     height:6px; 
     background: $green; 
     text-align:left; 
     border-width: 6px !important; 
     width: 130px; 
    } 
    } 
} 

HTML

<section id="main" class="no-pad"> 
    <div class='header' style="background-image: url('http://via.placeholder.com/1280x756')"> 
     <div class="summary"> 
     <hr></hr> 
     <p class="tagline">BIG TEXT HERE</p> 
     <p class="tagline">Smaller text</p> 
     <p class="intro">continuing smaller text</p> 
     </div> 
    </div> 
    </section> 
+1

對我來說聽起來像它是最有可能不按預期工作的背景圖像。試試'background-size:cover;' – dbrree

+0

這實際上解決了問題 –

+0

好吧,我將添加爲答案。如果您可以將其標記爲可行的答案,我將不勝感激! – dbrree

回答

0

通過上述評論(確認作爲工作答案):

這些問題聽起來像是因爲背景圖像本身無法按預期工作。嘗試background-image: cover;