調整封面背景圖像的元素大小

我不完全確定這是否應該如此簡單。我一直在嘗試不同的方法，但我似乎無法把頭圍住它。調整封面背景圖像的元素大小

我有含標誌和裏面的按鈕我的頭版封面部分：

<section id="cover"> 

     <div id="cover-caption" class="animated fadeInDown"> 

      <p style="padding-bottom: 2rem;"><img src="http://bizcentralusa.com/wp-content/uploads/2016/05/placeholder-sample-logo.png" alt="Sample Logo" /></p> 
      <p class="lead"> 
       <a class="btn btn-primary btn-lg" data-scroll href="#getStarted" role="button">GET STARTED <i class="fa fa-angle-right animated wobble infinite" aria-hidden="true"></i> 
       </a> 
      </p> 

     </div> 

    </section>

封面的背景是半覆蓋頁一臺筆記本電腦的圖像。我希望徽標和按鈕位於頁面頂部和筆記本電腦屏幕的開頭之間。

這是我這麼遠（我認爲它更容易爲你只是直觀地看到我想要實現比有我解釋一下）......

Demo

常我只是在＃cover-caption容器上放一些填充，直到它壓低到我想要的位置，但這不適用於所有屏幕分辨率。它在我正在編輯的PC上看起來不錯，但是當我在我的Macbook上測試它時，雖然徽標和按鈕位於相同的位置，但由於瀏覽器高度不同，背景圖像已更改。我想我要做的是讓我的標誌和按鈕自動調整其位置，以改變瀏覽器窗口的高度時，背景圖像的變化。這甚至有可能嗎？

This is my full code

來源

2017-03-09 jkarakizi

這應該是通過css flexbox和視口的高度方便。

#cover-caption{ 
    display: flex; 
    height: 66vh; 
    flex-direction: column; 
    justify-content: center; 
} 
#cover-caption > *{ 
    flex: 0 1 auto; 
}

見適應fiddle

來源

2017-03-09 09:32:39 phils

這工作完美！謝謝：） – jkarakizi

你應該嘗試像

#cover-caption{ 
    display: block;width: 20%;margin: 20px auto;position: relative;top: 100px; 
}

這可能有助於CSS。

來源

2017-03-09 09:58:09

調整封面背景圖像的元素大小

回答

相關問題