css - 缩放时背景图像会切断图像顶部

Question

我在 Netflix 克隆版顶部的横幅上设置了背景图片。我喜欢它的外观，除非当我缩放窗口以使其变大时它会剪切图像。我不知道如何缩放图像并使顶部与顶部对齐。

窗口较小时的示例——看起来很棒! [1]: /image/e0x1O.png

窗口稍微缩放时的示例——不清楚图片中发生了什么 [2]: /image/kCMG1.png

目前，图像是这样设置的，我添加了“封面”和“中心”来尝试修复它，但没有成功。

<header
  className="banner"
  style={{
    backgroundImage: `url(${movie?.backdrop_path})`,
    backgroundSize: "cover",
    backgroundPosition: "center",
  }}
>

Answer 1

试试 backgroundPosition: "top"。

图像垂直居中，“cover”的背景尺寸导致顶部和底部被切掉以填充宽度。

background-position: top 将图片从顶部锚定到顶部，因此您只会丢失图像的底部。