时间戳

首页 > 解决方案 > 缩放时背景图像切断图像顶部

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

问题描述

我在 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",
  }}
>

标签： cssbackground-image

解决方案

试试backgroundPosition: "top"。

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

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

推荐阅读