使用封面背景图像调整元素大小答案

【问题标题】：Resize elements with cover background image使用封面背景图像调整元素大小
【发布时间】：2017-03-09 09:18:12
【问题描述】：

我不完全确定这是否像它应该的那样简单。我一直在尝试不同的方法，但我似乎无法理解它。

我的首页上有一个封面部分，其中包含一个徽标和一个按钮：

<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

【问题讨论】：

标签： javascript html css background bootstrap-4

【解决方案1】：

这应该很容易通过css flexbox 和视口高度来实现。

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

见改编fiddle

【讨论】：

【解决方案2】：

你应该试试css之类的

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

这可能会有所帮助。

【讨论】：