Background Image在缩放时切断图像的顶部

Question

我有一个背景图像设置在我的Netflix克隆顶部的横幅上。我喜欢它的样子，除了当我缩放窗口使它更大时，它会切割图像。我不知道如何缩放图像并保持上下对齐。

当窗口很小的例子-看起来很棒![1]: https://i.stack.imgur.com/e0x1O.png

当窗口缩放一点的例子-不清楚在图片中发生了什么[2]: https://i.stack.imgur.com/kCMG1.png

目前，这就是图像的设置方式，我添加了'cover'和'center'来尝试修复它，但没有运气。

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

Answer 1

试试backgroundPosition: "top".

图片垂直居中，背景尺寸"cover"导致顶部和底部被切断以填充宽度。

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