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

[Anonymous]

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


Фрагмент кода React

Код: Выделить всё

/* This is the corresponding 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;
}
}
}
}
}

Код: Выделить всё

/* this is 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}`)}
>
[img]{posterUrl} /[/img]

{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;

Пример визуализированного вывода

Код: Выделить всё

:root {
--black: black;
}

body {
font-family: sans-serif;
}

.watchList {
background-color: var(--black);
padding-top: 50px;
margin-bottom: 10px;
}
.watchList .item {
margin: 10px auto;
width: 500px;
height: 350px;
border: 2px solid white;
}
.watchList .item .itemWrapper {
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.watchList .item .itemWrapper .posterBlock {
position: relative;
width: 40%;
}
.watchList .item .itemWrapper .posterBlock .posterImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.watchList .item .itemWrapper .textBlock {
display: flex;
flex-direction: column;
margin-left: 15px;
}
.watchList .item .itemWrapper .textBlock .title {
font-size: 2em;
color: white;
margin-bottom: 10px;
}
.watchList .item .itemWrapper .textBlock .info .text {
margin-right: 10px;
opacity: 0.5;
line-height: 24px;
color: white;
}
.watchList .item .itemWrapper .textBlock .info .text.bold {
font-weight: 600;
opacity: 1;
}
.watchList .item .itemWrapper .textBlock .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;
}
.watchList .item .itemWrapper .textBlock .btn:hover {
box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
transition-duration: 0.1s;
}

Код: Выделить всё

[img]https://pad.mymovies.it/filmclub/2024/01/133/locandina.jpg[/img]

Halo

Released on:
Mar 17, 2024

Type:
TV series

Added on: 
Mar 12, 2024

Remove






[img]https://www.tres-click.com/wp-content/uploads/2017/04/dasperfektedinner.jpg[/img]

Das perfekte Dinner

Released on:
Mar 17, 2024

Type:
TV series

Added on:  
Mar 12, 2024

Remove






[img]https://m.media-amazon.com/images/M/MV5BZThiYTE5YTgtYzJhNy00ZTM2LTgyNTMtOTExZWNlZTBjZWYwXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg[/img]

Watch What Happens Live with Andy Cohen

Released on:
Mar 17, 2024

Type:
TV series

Added on: 
Mar 12, 2024

Remove

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