Tailwind Wrong Image Width - html

Question

There is a problem while styling tailwind-react app.
The image must be look like this:
But my image looking like this. As you can see, it is not 438px.
Source code:
<div className='flex flex-col fg:flex-row w-full fg:h-[340px] fg:items-center hover:bg-gray-100 transition-colors duration-250'>
<div className='flex h-60 fg:h-[292px] fg:w-[438px] border border-black'>
<img className='w-full h-full object-cover object-center' src={require('../../image.jpg')} />
</div>
<div className='flex flex-col pl-4 pr-6 pt-6 pb-6'>
<h1 className='text-[28px] font-bold'>{item.title}</h1>
<p className='text-[17px] mt-1'>{item.summary}</p>
<div className='flex flex-col mt-2 sm:flex-row sm:gap-[10px]'>
<p className='text-gray-500 block text-[14px]'><Link to="/about" className='hover:underline'>{item.author}</Link></p>
<div className='flex gap-[10px] mt-1 sm:mt-0'>
<div className='flex'>
<Link to="/"><span className='flex flex-row'><FavoriteBorderSVG className='w-[16px] fill-gray-500' /><p className='text-sm text-gray-500 mt-[1px] ml-[2px]'>{` ${item.likeCount && item.likeCount != "0" ? item.likeCount : ""}`}</p></span></Link>
</div>
<div className='flex'>
<Link to="/"><span className='flex flex-row'><ChatBubbleBorderSVG className='w-[16px] fill-gray-500' /><p className='text-sm text-gray-500 mt-[1px] ml-[2px]'>{` ${item.commentCount && item.commentCount != "0" ? item.commentCount : ""}`}</p></span></Link>
</div>
<div className='flex'>
<Link to="/"><span className='flex flex-row'><ShareSVG className='w-[16px] fill-gray-500'/></span></Link>
</div>
</div>
</div>
</div>
</div>