时间戳

首页 > 解决方案 > 使图像适合小弹出框 - React.js + Bootstrap

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

问题描述

有人可以帮我解决这个问题。我正在使用 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%;
  }
}

这就是它现在的样子。

那么，是否有可能将整个图像适合屏幕？

谢谢

标签： cssreactjsimagebootstrap-4package

解决方案

您是否尝试为图像提供 awidth: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

推荐阅读