Question

我正在尝试使用vh和vw测量，所以我遇到了这个问题：当我垂直调整窗口大小/打开chrome控制台然后向下滚动窗口时，滚动过程中不会加载背景。我怎样才能重新计算窗口视图？或者我怎么能解决这个问题呢？是否有必要使用媒体查询？任何帮助将不胜感激。

.m-page-header {
  display: flex;
}

.m-page-header__wrapper {
  margin: 0 auto;
}

.m-page-header__img-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.m-page-header img {
  max-width: 100%;
  height: auto;
  display: block;
}

.main-content {
  display: block;
  background-image: url("https://image.ibb.co/hTboSm/1_HEADER_bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
   width: 100vw;
  height: 100vh;
}

.main-content__wrapper {
  max-width: 960px;
  margin: 0 auto;
}

html,
body {
  height: 100%;
}

body {
  min-width: 960px;
}

.visually-hidden {
  display: none;
}

<body>
  <main class="main-content">
    <div class="main-content__wrapper">
      <header class="m-page-header">
        <div class="m-page-header__wrapper">
          <section class="m-page-header__img-container">
            <h2 class="page-header__header-text visually-hidden">Game</h2>
            <img src="https://image.ibb.co/cNjQ7m/1_HEADER_logo.png" alt="Game">
          </section>
        </div>
      </header>
    </div>
  </main>
</body>

Answer 1

您有两种解决方案：

1）将background-size: contain添加到.main-content：窗口大小调整将不再裁剪背景。背景将保持完全可见，但它不会水平拉伸。

<强> https://jsfiddle.net/o0p9y03f/

2）将background-size: cover添加到.main-content：背景将保持水平拉伸，但它将被裁剪以填充整个容器。

在任何情况下，您都必须处理容器的大小和居中，具体取决于您要查找的结果。

<强> https://jsfiddle.net/o0p9y03f/1/

使用vw和vh度量调整窗口大小的问题

1 个答案: