调整浏览器宽度和封面照片必须保留裁剪图像的中心

日安，

我在下面的个人资料页面示例中瞄准了一个效果，

使用REACT， 我的问题是，在调整浏览器的宽度时，我想不出如何保持封面照片的中心位置。

正如您在视频中所看到的。https://www.screencast.com/t/DxQWBO1FuJOu

• 在0到4秒内，封面照片使其宽度适合调整大小的浏览器，并保持其中心位置。
• 从5秒开始或达到1580px浏览器宽度时，封面图像将停止调整其宽度，并在调整大小时保持其中心。

我们如何才能做到这一点？我非常感激任何帮助，这样可以节省我的时间。

顺便说一句，个人资料页面只是一个随机的个人资料

确保这次大流行的安全。 谢谢。

这是我当前的代码

import { Image } from 'react-bootstrap'

<Image
 fluid
 src='/'
 style={{ width: '1920px', height: 'auto', position: 'absolute', zIndex: -1, objectFit: 'cover', objectPosition: 'center' }}
/>

---

解决方案

我上次这样做已经有一段时间了，但诀窍是将图像的左负边距设置为50%，然后将边缘居中，您也可以使用上边距执行此操作。

很抱歉没有更详细的答案，但希望这能给您一些东西供您探索