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

Question

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

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

window 稍微缩放时的示例 -- 不清楚图片中发生了什么 [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"。

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

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

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

Background Image cuts off top of image when scaling

css

background-image