Как получить фоновое изображение, центрированное / покрывающее элемент div, но с отступом - PullRequest
Новая
       26

Как получить фоновое изображение, центрированное / покрывающее элемент div, но с отступом

0 голосов
/ 05 мая 2019

У меня есть следующий 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>

Я бы хотел, чтобы изображение центрировалось с отступом не менее 50 пикселей для каждого размера и ориентации экрана. Вот и все. Не могу понять.

Например, зеленая область / изображение в этом примере должно показывать изображение, которое не растянуто и имеет некоторый отступ вокруг него, так что вы можете видеть полностью красную фигуру вокруг него.

...