Resize browser width and cover photo must retain the center of cropped image

user_2871563 0
Viewed 30

Good day,

I am aiming an effect in a profile page example below,

enter image description here

Using React, my struggle is, I can't figure out how to keep the cover photo it's center when resizing the browser's width.

As you can see in the video. https://www.screencast.com/t/DxQWBO1FuJOu

  • From 0 to 4 seconds the cover photo is making fit its width to the resizing browser and remains its center.
  • From 5 seconds onwards or when reaching 1580px browser width, the cover image stops making a fit of its width and still keeping its center during resizing.

How can we achieve this? Any help is highly appreciated and saves me wasting hours.

Btw, the profile page is just a random profile

Keep safe this pandemic. Thank you.

here is my current code

import { Image } from 'react-bootstrap'

<Image
 fluid
 src='/'
 style={{ width: '1920px', height: 'auto', position: 'absolute', zIndex: -1, objectFit: 'cover', objectPosition: 'center' }}
/>
react-bootstrap reactjs css image html
1 Answers

It is been a while since I did this, but the trick was to give the image a negative-left margin of 50% and then center the the edge, you can also do this with the top margin.

Sorry not to have a more detailed answer, but hopefully that gives you something to explore

user_20870700
Related