html - 在浏览器窗口重新缩放时将 div 和图像与背景封面对齐

Question

我正在创建一个登陆页面，网站有 4 个部分:主页、关于、下载、联系方式。主页和下载部分的背景图像可以正确拉伸(stretch)以适应页面背景。为此，我使用了以下 CSS:

.download {
  height: 100%;
  background: url(../img/image.jpg) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

下载部分有以下内容:

  <section id="download" class="download content-section text-center">
        <div class="download-section">
            <div class="container">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2>Header</h2>
                    <div>Text</div>
                </div>
                <img src="img/myimage.png" />
            </div>
        </div>
    </section>

这在我的 21 英寸大屏幕上看起来很不错，但是当我调整窗口大小时，下载部分的元素会超出背景图像并延伸到联系人部分。

我如何确保所有元素都正确对齐，即: - 一个部分的元素不会显示在下一部分的元素之上 - 如果不需要显示到下一部分，myimage.png 正在调整大小 - 如果该部分不适合一页，背景图像会向下延伸到当前部分的末尾。

Answer 1

在尝试各种方法并在评论的帮助下，这里是可用的 CSS:

.download {
  min-height: 100%;
  background: url(../img/image.jpg) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.download img {
  max-width: 100%;
}