IM new to web development.
As you can see in the image, the size of the movie posters is inconsistent and varies after entering the details page of each movie. I’ve also shared the relevant code with you:
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 on why this is happening or a possible solution, please share them with me.