Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Im new to web development.As you can see in the image, the size of the movie posters are inconsistent and varies after entering the details page of each movie. Here my relevant codes:
import React, { useEffect, useState } from 'react';import { useParams } from 'react-router-dom';import logoImage from '../assets/logo.webp';function MovieDetails() { const { id } = useParams(); const [movie, setMovie] = useState({}); useEffect(() => { if (id) { fetch(`https://api.themoviedb.org/3/movie/${id}?language=en-US&api_key=API-KEY`) .then(response => response.json()) .then(response => { setMovie(response); }) .catch(err => console.error(err)); } }, [id]); return (<body className="absolute inset-0 h-full w-full bg-[#020129] overflow-scroll"><div className="flex flex-col md:flex-row items-center md:items-start w-full h-full p-8"> {/* Poster Container with Fixed Aspect Ratio */}<div className="relative w-[200px] h-[300px] flex-shrink-0 px-8"> {movie.poster_path ? (<img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title || movie.name} className="w-full h-full object-cover rounded-xl" /> ) : (<div className="w-full h-full bg-gray-800 rounded-xl flex items-center justify-center"><span className="text-white">No Image Available</span></div> )}</div> {/* Movie Details */}<div className="flex-shrink-0 text-white px-8 mt-8 md:mt-0"><a href="/" className="inline-block py-4 w-fit" title="Home"><img alt="Home" src={logoImage} className="h-8 sm:h-10 md:h-10" /></a><h1 className="text-3xl font-bold mb-4">{movie.title || movie.name}</h1><p className="mb-2"><strong>IMDb Score:</strong> {movie.vote_average ? movie.vote_average.toFixed(1) : "N/A"}/10</p><p className="line-clamp-3 mb-4">{movie.overview}</p><p className="mt-2"><strong>Release Date:</strong> {movie.release_date}</p><p className="mt-2"><strong>Genre:</strong> {movie.genres && movie.genres.map((genre) => genre.name).join(', ')}</p></div></div></body> );}export default MovieDetails;If you have any ideas about why this is happening or any possible solution, please share them with me.
