英雄形象未居中

Question

我有这支码笔： Code Pen

但是当我缩小屏幕尺寸时，图像似乎没有居中，但不应该像这样居中：

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90vh;
  padding: 1em;
  box-sizing: border-box;
  color: white;
  background: url("./assets/hero2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

和我的HTML

<section class="hero">
      <h1 id="header">
        Vuokrausasemalla asukkaiden tarvitsemat tavarat ja laitteet yhteiskäyttöön
      </h1>
      <article class="hero-header">
        <p>Parannamme elämänlaatua kasvattamatta hiilijalanjälkeä. Säästämme taloyhtiön asukkaiden kaappitilaa, rahaa ja aikaa tekemällä vuokraamisesta omistamista helpompaa.</p>
      </article>
     
        <form action="submit" class="hero-footer">
          <input type="text" placeholder="Sähköposti">
          <button>Tilaa uutiskirje</button>
        </form>
      
    </section>

应该可以吗？提前致谢

Answer 1

无论我的 window 有多大，背景中朝上的螺丝似乎都位于中心。也许尝试不同的浏览器？它适用于最新的 chrome 和 firefox。

Answer 2

如果我理解正确，您需要指定 background-size 以同时涵盖 x 和 y： background-size: cover cover;.

这样，无论屏幕尺寸如何，您都将牺牲图像边缘以完全覆盖容器的所有轴。

英雄形象未居中

Hero image not centered

html

css

flexbox

background-image