使背景图像响应移动布局，但将其保持在固定位置答案

【问题标题】：make background-image responsive for mobile-layouts but keep it in fixed position使背景图像响应移动布局，但将其保持在固定位置
【发布时间】：2018-09-07 17:43:09
【问题描述】：

如何使我的部分背景图像响应浏览器的大小变化？例如，如果浏览器处于全尺寸模式（2540x1440），则图像为 1280x768，一旦我将窗口大小调整为低于 1280 的值，它应该开始缩小但成比例。就像我会在 adobe photoshop 中调整它的大小并限制比例。

目前我的 html 代码如下所示：

<!-- Header -->
<header class="masthead bg-head text-white text-center">
  <div class="container">
    <h1 class="text-uppercase mb-0">My Name</h1>
    <img class="img-fluid" src="img/star-light.png" alt="">
    <h2 class="font-weight-light mb-0">Issue Solving</h2>
  </div>
</header>

最后一小时播放的 css 代码是：

@media (min-width: 992px) {
  header{
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    margin-top: 71px;
    padding-top: 96px;
    height: 25rem;
    width: 1280px;
  }
}

这看起来如下：

一旦我开始将浏览器缩小到与图片相同的宽度，它应该会随之缩小，但按比例缩小。不知何故，我现在不知道任何其他技巧

【问题讨论】：

标签： html css background fixed

【解决方案1】：

首先：您不需要在@media 查询中执行此操作 :)

第二：您使用了固定的宽度和高度。这意味着无论您调整多少浏览器，它都将始终是这个大小。

所以让我们在没有@media 查询的情况下解决这个问题，我们将使用视口单位而不是固定比例。

header{
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    margin-top: 71px;
    padding-top: 96px;
    height: 20vh;
    width: 100vw;
  }

将其更改为 vw 和 vh 将使其响应。您可以添加max-width: 1280px，这样您的标题就不会比任何大屏幕上的大。

【讨论】：