I recently integrated the react-modal-image library into my project to display images in a modal when clicked. However, I encountered an issue where the displayed image is off center with most of it appearing offscreen. I'm unsure what is causing this problem. Here is an example of how my image looks before being clicked: https://i.sstatic.net/uCDtV.png
And here is how it appears afterwards: https://i.sstatic.net/L3U5w.jpg
Below is the snippet of code where I utilize the npm package:
<div className="card home-card" key={item._id}>
<h5 style={{ padding: "5px" }}>
<Link
to={
item.postedBy._id !== state._id
? "/profile/" + item.postedBy._id
: "/profile"
}
>
{item.postedBy.name}
</Link>
{item.postedBy._id == state._id && (
<i
className="material-icons"
style={{ float: "right", cursor: "pointer" }}
onClick={() => deletePost(item._id)}
>
delete
</i>
)}
</h5>
<div className="card-image">
<ModalImage
small={item.photo}
medium={item.photo}
alt={item.title}
/>
</div>