How to set up img size in React.js - css

Question

I have trouble resizing my image in specific
I set up .img in my index.css like this
.img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
my portfolio.jsx is
<div className="container portfolio_container">
<article className='portfolio_item'>
<div className="portfolio_item-image">
<img src={IMG1} alt="Pair Up" />
</div>
<h3>Pair Up</h3>
<a href='https://github.com/Adipure/pairUp' className='btn' target='_blank'>Github</a>
<a href='https://me0wmerz.github.io/pairUp/' className='btn btn-primary' target='_blank'>Live View</a>
</article>
<article className='portfolio_item'>
<div className="portfolio_item-image">
<img src={IMG2} alt="4AnimeArchive" />
</div>
<h3>4AnimeArchive</h3>
<a href='https://github.com/Adipure/anotherAnimeArchive' className='btn' target='_blank'>Github</a>
<a href='#' className='btn btn-primary' target='_blank'>Live View</a>
</article>
<article className='portfolio_item'>
<div className="portfolio_item-image">
<img src={IMG3} alt="Console.log" />
</div>
<h3>Console.log</h3>
<a href='https://github.com/Adipure/console.log' className='btn' target='_blank'>Github</a>
<a href='#' className='btn btn-primary' target='_blank'>Live View</a>
</article>
<article className='portfolio_item'>
<div className="portfolio_item-image">
<img src={IMG5} alt="weather" />
</div>
<h3>Weather Forecast</h3>
<a href='https://github.com/Adipure/WeatherHomwork' className='btn' target='_blank'>Github</a>
<a href='https://adipure.github.io/WeatherHomwork/' className='btn btn-primary' target='_blank'>Live View</a>
</article>
<article className='portfolio_item'>
<div className="portfolio_item-image">
<img src={IMG6} alt="snakeGame" />
</div>
<h3>Snake Game</h3>
<a href='https://github.com/Adipure/snakeGame' className='btn' target='_blank'>Github</a>
<a href='#' className='btn btn-primary' target='_blank'>Live View</a>
</article>
<article className='portfolio_item'>
<div className="portfolio_item-image">
<img src="#" alt="tbh" />
</div>
<h3>TBH</h3>
<a href='#' className='btn' target='_blank'>Github</a>
<a href='#' className='btn btn-primary' target='_blank'>Live View</a>
</article>
</div>
and I also set up .portfolio_item-image in portfolio.css like this
.portfolio_item-image {
border-radius: 1.5rem;
-webkit-border-radius: 1.5rem;
-moz-border-radius: 1.5rem;
-ms-border-radius: 1.5rem;
-o-border-radius: 1.5rem;
overflow: hidden;
}
and the result is the following,
I don't know why my second and 3rd image sizes are different from the others.
please help. thank you
I tried all CSS properties to resize them, but nothing changes.