Fit image to small popupbox - React.js + Bootstrap - css

Question

Can someone please help me with this problem. I'm creating my personal portfolio website using react.js and bootstrap. I'm using react popupbox package but when I click on that popup using small screen, my picture is not in the middle. How can I change that? And is that even possible using only css?
Declaring popupbox code:
const Portfolio = () => {
const openPopupboxFlappyBird = () => {
const content = (
<>
<img className="portfolio-image-popupbox" src= {flappyBird} alt="Flappy Bird" />
<p>Flappy Bird game written in C#</p>
<a className="hyper-link" onClick={() => window.open("https://github.com/zacikmareek/simpleFlappyBird", "_blank")}>Github link</a>
</>
)
PopupboxManager.open({ content })
}
const popupboxConfigFlappyBird = {
titleBar: {
enable: true,
text: "Flappy Bird"
},
fadeIn: true,
fadeInSpeed: 500
}
Adding image:
return (
<div className="portfolio-wrapper">
<div className="container">
<h1 className="text-lovercase text-center py-5">.portfolio()</h1>
<div className="image-box-wrapper row justify-content-center">
<div className="portfolio-image-box" onClick={openPopupboxFlappyBird}>
<img className="portfolio-image" src={flappyBird} alt="Flappy Bird" />
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>
</div>
</div>
<PopupboxContainer {...popupboxConfigFlappyBird} />
</div>
)
And here is my .css:
.portfolio-image-popubox {
width: 45rem;
padding: 0 0.5rem;
}
.hyper-link {
cursor: pointer;
color: var(--secondary-dark);
}
.hyper-link:hover {
color: var(--primary-red);
}
#media(max-width: 768px) {
.portfolio-image-popubox {
width: 100%;
}
}
#media(max-height: 640px) {
.popupbox-wrapper {
height: 100%;
}
.portfolio-image-popubox {
width: 80%;
}
}
This is how it looks like now.
So, is there any possibility to fit whole image to screen?
Thank you

Answer 1

Have you tried to give the image a width:100%; or the w-100 bootstrap class?
If nothing happens, try adding display:block; or display:inline-block; too the img tag as well.
If the img already has an 100% width, you can use the object-fit property, object-fit: contain; or object-fit: cover;
EDIT:
Based on some simple testing on the website that you've provided, by adding to your CSS, it should be fixed.
.portfolio-image-popupbox {
width: 100%;
}
screenshot: https://ibb.co/pXjLwHf