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

Resize browser width and cover photo must retain the center of cropped image(调整浏览器宽度和封面照片必须保留裁剪图像的中心)

问题描述

日安，

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

使用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%，然后将边缘居中，您也可以使用上边距执行此操作。

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

这篇关于调整浏览器宽度和封面照片必须保留裁剪图像的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！