如何布局图像，使其位于广告 space 的左侧，但使用 flexbox 居中

Question

我有以下 HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      * {
        box-sizing: border-box;
      }

      section, header {
        width: 100vw;
        height: 100vh;
      }

      header {
        display: flex;
        flex-direction: row;
      }

      header div {
        flex: 1;
      }

      header aside {
        background: black;
      }
    </style>
  </head>
  <body>
    <header>
      <div style='background-image: url(https://i.cloudup.com/C9UpLWmovB.jpg);'>

      </div>
      <aside>
        
      </aside>
    </header>

    <section>
      <p>Hello World.</p>
    </section>
  </body>
</html>

我正在努力做到这一点，所以我有 2 个 "sections"（header 和 section），它们都占据了整个视口 width/height。然后在 section（第二个完整页面视图）中，它使文本垂直和水平居中。在 header（第一个完整页面视图）中，它的布局如下：

 _____________________
|               |     |
|               |     |
|    centered   |     |
|     image     | ad  |
|               |     |
|               |     |
|_______________|_____|

图像将填充任何尺寸以使其居中。例如，像这样：

 ___________________
|  _______________  |
| |               | |
| |               | |<-- image
| |               |<---- viewport
| |               | |
| |               | |
| |               | |
| |_______________| |
|___________________|

或者在更宽的屏幕上：

     ___ viewport
    |
    |
 ___|_______________<-- image
|___v_______________|
|                   |
|                   |
|                   |
|                   |
|                   |
|                   |
|___________________|
|___________________|

图像不会拉伸，但会放大和缩小以完全填满视口，在本例中它只是 window 的一部分，因为我们有广告 space .

了解如何执行此操作将可以将任何图像放置在容器中，以便正确填充容器。

想知道如何完成这个。

现在它看起来像这样并且没有向右滚动：

Answer 1

您尝试过设置背景大小吗？

 header > div {
    background-position: center;
    background-size:cover;
    }

或使用媒体查询根据视口设置背景大小？

@media screen and (max-width: 992px) {
 header > div {
            background-position: center;
            background-size:70%;
            }
}

如何布局图像，使其位于广告 space 的左侧，但使用 flexbox 居中

How to layout image so it is to left of ad space and yet centered using flexbox

html

css

image

centering

flexbox