调整封面背景图像的元素大小

我不完全确定这是否应该如此简单。我一直在尝试不同的方法，但我似乎无法把头围住它。调整封面背景图像的元素大小

我有含标志和里面的按钮我的头版封面部分：

<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

调整封面背景图像的元素大小

回答

相关问题