背景图缩放时顶部被裁剪

Question

背景图缩放时顶部被裁剪

cssbackground-image

3

我在Netflix克隆网站的顶部横幅上设置了一个背景图片，它看起来很不错，但是当我调整窗口大小时，图片被裁剪了。我想要缩放图片并使顶部与顶部对齐，但是我无法解决这个问题。

窗口较小时的示例 - 看起来很好！ [1]: https://istack.dev59.com/e0x1O.webp

当窗口稍微缩放时的示例 - 图片中发生了什么不清楚 [2]: https://istack.dev59.com/kCMG1.webp

目前，图片的设置如下，我添加了'cover'和'center'来尝试修复它，但是没有成功。

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

- Lorenzo Covarrubias

嗨，有趣，不确定这些选项是否有帮助：https://dev59.com/MmIj5IYBdhLWcg3wKiLs - IronMan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cam · Accepted Answer

尝试使用backgroundPosition: "top"。

图像在垂直方向上居中，"cover"背景大小导致顶部和底部被裁剪以填充宽度。 background-position: top 将图片锚定在顶部，从顶部开始，因此您只会失去图像的底部部分。