缩放时背景图像切断图像顶部

Question

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

窗口较小时的示例——看起来很棒！ [1]：https://i.stack.imgur.com/e0x1O.png

窗口稍微缩放时的示例 -- 不清楚图片中发生了什么 [2]：https://i.stack.imgur.com/kCMG1.png

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

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

Answer 1

试试backgroundPosition: "top"。

图像垂直居中，“封面”的背景大小导致顶部和底部被切断以填充宽度。

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