Question

我有以下HTML：

<!doctype html>
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }

      body {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }

      * {
        box-sizing: border-box;
        position: relative;
      }

      body > header {
        width: 100vw;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
      }

      header {
        display: flex;
        flex-direction: column;
      }

      header > section {
        display: flex;
        flex-direction: row;
        flex: 1;
      }

      header > section > figure {
        flex: 1;
        background: red;
        padding: 10px;
      }

      header > h1 {
        padding: 10px 20px;
        font-size: 20px;
        background: black;
        color: white;
      }

      header > section > figure > img {
        max-width: 100%;
        height: auto;
        background: green;
      }

      header > section > aside {
        width: 300px;
        display: flex;
        background: yellow;
      }

    </style>
  </head>
  <body>
    <header>
      <section>
        <figure>
          <img/>
        </figure>
        <aside>
          <img/>
        </aside>
      </section>

      <h1>Hello World</h1>
    </header>
  </body>
</html>

我希望图像在每个屏幕尺寸和方向上都以至少50px的填充居中。就是这样。无法弄清楚。

例如，示例中的绿色区域/图像应显示未拉伸的图像，该图像周围有一些填充，以便您可以看到周围的红色全图。

如何使背景图片居中/覆盖div，但使用填充

0 个答案: