search

rrutsche / react-parallax

A React Component for parallax effect
MIT License
855 stars 76 forks source link

Image background (wide ones) is not responsive for phone #111

Open Filippinifra opened 2 years ago

Filippinifra commented 2 years ago

Is your feature request related to a problem? Please describe.

Image background (wide ones) is not responsive for phone

Describe the solution you'd like I think the best solution should be use a div with background image, background-size: contain; background-repeat: no-repeat; background-position: center; instead of img tag

Describe alternatives you've considered Make javascript render image responsively

Additional context

Video record:

https://user-images.githubusercontent.com/31794601/149634800-21692075-abd1-4c61-a435-4323b3b74d6c.mov

and this is the line code:

<Parallax bgImage={FirstParallaxImage} strength={500} style={{ height: '100%', opacity: 0.8 }} />

ghost commented 2 years ago

I'm having the same issue with this, I can make it look good at one screen size, but then if I look at it at any other screen size or a mobile/tablet, the dimensions of the image are all messed up.

rrutsche commented 2 years ago

Hey guys, thanks for the report. Can you send me a sandbox link (maybe fork this one https://codesandbox.io/embed/r0yEkozrw) or a link to a fiddle or something? Would help a lot, thanks.

ghost commented 2 years ago

I think my issue was I was using an internal element to set the parallax height, I've sorted it now, thanks.