Изображение переполнено ⇐ CSS

[Гость]

Я пытаюсь создать список фильмов для просмотра, но у меня возникли проблемы с его поддержанием. Я использую tmbd API для получения данных о фильме. Теперь я хочу, чтобы каждая серия выглядела как первая (ореол). Но в двух других изображения переполняются и портят дизайн. Пожалуйста, помогите


это WatchList.jsx
import dayjs from "dayjs";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import ContentWrapper from "../../components/contentWrapper/ContentWrapper";
import Img from "../../components/lazyLoadImage/Img";
import "./style.scss";
import { removeFromWatchList } from "../../store/homeSlice";

const WatchList = () => {
const { url, watchList } = useSelector((state) => state.home);
const navigate = useNavigate();
const dispatch = useDispatch();

const removeMovieFromWatchList = (item) => {
console.log(item);
dispatch(removeFromWatchList(item));
};

return (


{watchList.length > 0 &&
watchList.map((m) => {
const posterUrl = m[0].poster_path
? url.poster + m[0].poster_path
: PosterFallback;
return (



navigate(`/${m[2]}/${m[0].id}`)}
>


{m[0].title || m[0].name}


Released on:

{dayjs(m[0].release_date).format("MMM D, YYYY")}


Type:

{m[2] === "movie" ? "Movie" : "TV series"}


Added on:

{dayjs(m[1]).format("MMM D, YYYY")}


removeMovieFromWatchList(m[0].id)}
>
Remove





);
})}


);
};

export default WatchList;


**
Это соответствующий style.scss**
@import "../../mixins.scss";
.watchList {
background-color: var(--black);
padding-top: 50px;
margin-bottom: 10px;

.item {
margin: 10px auto;
width: 500px;
height: 350px;
border: 2px solid white;

.itemWrapper {
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;

.posterBlock {
position: relative;
width: 40%;

.posterImg {
width: 100%;
height: 100%;
object-fit: cover;
}
}

.textBlock {
display: flex;
flex-direction: column;
margin-left: 15px;
.title {
font-size: 2em;
color: white;
margin-bottom: 10px;
}
.info {
.text {
margin-right: 10px;
opacity: 0.5;
line-height: 24px;
color: white;
&.bold {
font-weight: 600;
opacity: 1;
}
}
}

.btn {
background-image: linear-gradient(
92.88deg,
#455eb5 9.16%,
#5643cc 43.89%,
#673fd7 64.72%
);
color: white;
font: var(--black);
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 500;
height: 2rem;
cursor: pointer;
border-radius: 8px;
border-style: none;
margin-top: 10px;
padding: 1.3rem;
}
.btn:hover {
box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
transition-duration: 0.1s;
}
}
}
}
}



Подробнее здесь: https://stackoverflow.com/questions/781 ... verflowing