使图像适合小弹出框 - React.js + Bootstrap

Question

谁能帮我解决这个问题。我正在使用 react.js 和 bootstrap 创建我的个人投资组合网站。我正在使用 react popupbox 包，但是当我使用小屏幕单击该弹出窗口时，我的图片不在中间。我该如何改变呢？仅使用 css 是否有可能？

声明弹出框代码：

    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
    }

添加图片：

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>
    )

这是我的 .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.

那么，有没有可能让整个图像适合屏幕？

谢谢

Answer 1

您是否尝试为图像提供width:100%; 或w-100 引导类？ 如果没有任何反应，请尝试添加 display:block; 或 display:inline-block; 以及 img 标签。

如果img已经有100%的宽度，你可以使用object-fit属性，object-fit: contain;或者object-fit: cover;

编辑：

根据您提供的网站上的一些简单测试，通过添加到您的 CSS，应该可以修复它。

.portfolio-image-popupbox {
    width: 100%;
}

截图：https://ibb.co/pXjLwHf