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

Posted 2023-03-05

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

【英文标题】：Resize browser width and cover photo must retain the center of cropped image

【发布时间】：2020-12-18 02:57:42

【问题描述】：

早安，

我的目标是在下面的个人资料页面示例中使用效果，

使用反应， 我的苦恼是，在调整浏览器的宽度时，我无法弄清楚如何将封面照片保持在中心位置。

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

从 0 到 4 秒，封面照片使其宽度适合调整大小的浏览器并保持其中心。 从 5 秒开始或达到 1580 像素浏览器宽度时，封面图片停止适应其宽度，并在调整大小期间仍保持其中心。

我们怎样才能做到这一点？任何帮助都非常感谢，并节省了我浪费的时间。

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

在这场大流行中保持安全。 谢谢。

这是我当前的代码

import  Image  from 'react-bootstrap'

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

【问题讨论】：

向我们展示您的代码。请阅读***.com/help/minimal-reproducible-example

【参考方案1】：

我已经有一段时间没有这样做了，但诀窍是给图像一个 50% 的负左边距，然后将边缘居中，你也可以用上边距来做到这一点。

很抱歉没有更详细的答案，但希望能给你一些探索

【讨论】：

谢谢你，大卫，很遗憾，我正在努力理解你的回答，但我不明白

从内存中创建一个 1px 宽的 div，您可以轻松地将其居中，然后将 div 中图像的左边距设置为 -50%。 div 将保持居中，图像将在每一侧以相等的量溢出它