React component background image not fitting properly into the container when resizing the window-CodePudding

I have a problem with background image is not fitting properly inside the container element. The image is coming from an API call so I can only set the image inside the component and then I added styling in corresponding CSS file. The image is somewhat showing better on desktop but not properly at all on smaller screen.

Here is the link to my deployed app on GitHub pages: Netflix Clone App

The problem comes when you click on individual movies and go to movie details page. Banner and thumbnail images in the description are the issues.

 useEffect( () => {
        const getMovie = async () => {
        const response = await fetch(`${baseUrl}/${params.id}?api_key=${APIKEY}`);
            if (response.ok) {
                const data = await response.json();
                if (data !== null) {
                    setMovie(data);
                }
            } else {
                const handleError = () => {
                    alert('Movie not found');
                    setTimeout( () => {
                        history('/');
                    }, 1000);
                }
                handleError();
            }
        }
        getMovie();

    }, []);


    let moviePoster = movie.backdrop_path;
    
    if (moviePoster == null) {
        moviePoster = imageNotFound;
    } else {
        moviePoster = baseImageUrl   moviePoster;
    }
   

    return (
        <div className="movie">
            <div className="banner"
            style={{ 
                backgroundImage: `url("${moviePoster}")`
                }}>
               
            </div>
            <div className="movie_details">
                <div className="movie_image">
                    <img src={moviePoster} alt="Movie poster" />
                </div>
                <div className="movie_overview">
                    <h1>{movie?.name || movie?.title || movie?.original_title}</h1>
                    <h3>{movie?.tagline}</h3>
                    <p>{movie.overview}</p>
                    <div className="more_details">
                        <div>
                            <p>{movie.release_date && `Release Date: ${movie?.release_date}`}</p>
                            <p>{movie.genres && `Genres: ${movie?.genres.map( genre => ' '   genre.name)}`}</p>
                        </div>
                        <div>
                            <p>{movie.runtime && `Runtime: ${movie?.runtime} minutes`}</p>
                            <p>{movie.vote_average && `IMDB Rating: ${movie?.vote_average}`}</p>
                        </div>
                    </div>
                    <button className="btn-back" onClick={() => history('/')}>Go Back</button>
                </div>
            </div>
        </div>
    )
   
`
`
.banner {
    padding: 100px 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
}
`

CodePudding user response：

The Problem is, that you set the banner as a Background. If the format of the window is wrong, it zooms into the middle of the picture.

I would change the div to something like this:

<img src="${moviePoster}" style="width: 100%">

Does this solve your problem ? Let me know in the comments.

CodePudding user response：

Try this CSS code lines.

.banner {
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
}
.banner__contents {
    flex: 1;
}