模态不能减小小屏幕上的尺寸

发布于 2025-01-22 14:14:43 字数 746 浏览 0 评论 0原文

使用Create-React-app fyi。我有这个模态软件包，我从 https://www.npmjs.com/package/反应反应模式。它指出它是响应迅速的。

我正确地实现了它，并导入了“反应反应模式/样式”；确保它反应灵敏。但是，当在移动设备上时，我的内容被切断了，模式不会最小化，我正在使用CSS网格。我不是正确打电话吗？我希望实现的是，随着屏幕越来越小，模态的尺寸不断减小。

网格CSS

      .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, auto));
      grid-gap: 5rem;
      margin-top: 2rem;
      justify-items: center;
      align-items: center;
}
.item {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  border-radius: 25px;
  cursor: pointer;
}
<Modal>
 <img scr="/myimage.png" />
</Modal>

原文

Using create-react-app fyi. I have this modal package I used from https://www.npmjs.com/package/react-responsive-modal. It states that it is responsive.

I implemented it correctly and imported "react-responsive-modal/styles.css"; to make sure it is responsive. But when on mobile my content gets cut off and the modal doesn't minimize, I'm using CSS grid. Am I not calling something correctly? What I'm hoping to achieve is the modal keeps reducing in size as screens get smaller.

Grid CSS

      .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, auto));
      grid-gap: 5rem;
      margin-top: 2rem;
      justify-items: center;
      align-items: center;
}
.item {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  border-radius: 25px;
  cursor: pointer;
}
<Modal>
 <img scr="/myimage.png" />
</Modal>

分享到QQ

分享到微博