容器中的图像具有相对位置会导致大的布局偏移

Question

我正在照片上放置文字。问题是这会导致较大的布局变化，这不利于页面的性能。如何避免布局偏移？

const HeaderSection = styled.div`
  position: relative;
`;

const Image = styled.img`
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
  max-width: 100%;
`;

const TitleH1 = styled.h1`
  font-size: 60px;
  font-weight: 500;
  font-family: Times New Roman;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 130px;
  text-align: center;
`;

<HeaderSection>
  <Image
    src={BackgroundImage}
    alt="header"
  />
  <TitleH1>{t("Home.Title")}</TitleH1>
</HeaderSection>

Answer 1

通过设置图像的高度解决了问题