带gatsby图像的全尺寸图像的模态.极限高度和宽度

Question

我想要实现的

我正在使用盖茨比，并希望设计一个图片库。单击其中一个图像将打开一个模式，该模式：(1)以尽可能大的大小显示图像，因此仍然适合屏幕，(2)是以为中心的屏幕。

我的密码

/* imagemodal.js */
import React from 'react'
import * as ImagemodalStyles from './imagemodal.module.css'
import { Modal } from 'react-bootstrap'
import Img from 'gatsby-image'
import { useStaticQuery, graphql } from 'gatsby'

export default function Imagemodal() {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "images/mytestimage.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 1200) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <div>
      <Modal
        show={true}
        centered
        className={ImagemodalStyles.imageModal}
        dialogClassName={ImagemodalStyles.imageModalDialog}
        onHide={(e) => console.log(e)}
      >
        <Modal.Header closeButton />
        <Modal.Body className={ImagemodalStyles.imageModalBody}>
          <h1>TestInhalt</h1>
          <Img fluid={data.file.childImageSharp.fluid} />
        </Modal.Body>
      </Modal>
    </div>
  )
}


/* imagemodal.module.scss */
.imageModalDialog {
  display: inline-block;
  width: auto;
}
.imageModal {
  text-align: center;
}
.imageModalBody img {
  max-height: calc(100vh - 225px);
}

问题

图像不会缩放到屏幕大小。图像要么太大--所以它流过了视觉端口--要么太小。其次，模态大小对图像大小的响应不正确和/或不居中。

我试过的

我在CSS中使用了这个建议：How to limit the height of the modal?

• I也尝试了几十个其他的CSS参数组合。但是我找不到一个可行的解决方案。

• 我尝试用样式标签直接格式化gatsby图像，

• 也尝试了反应模式，但也有类似的问题。

。

有没有人有一个很好的解决方案来显示一个gatsby图像的全屏大小在一个响应模式？对我来说，可以使用引导-模态或反应模式-或任何其他合适的解决方案。

编辑

最后，我找到了一个解决办法。我使用了react，并以gatsby图像中的图像源作为lightbox的输入。我的组件通过graphQL从道具中的props.imageData查询中获取数据。这对我来说很好：

import Lightbox from 'react-image-lightbox';
...

export default function Imagegallery(props) {
  ...
  const allImages = props.imageData.edges
  const [indexImageToShow, setIndexImageToShow] = useState()
  ...
  return(
  <Lightbox
    mainSrc={allImages[indexImageToShow].node.childrenImageSharp[0].fluid.src}
    ...
  />

特别感谢@FerranBuireu为我指出正确的方向

Answer 1

假设该功能按预期工作，这是CSS规则的问题，而不是React/Gatsby问题。以下规则：

.imageModalBody img {
  max-height: calc(100vh - 225px);
}

它永远不会正确应用，因为gatsby-image创建了嵌套<div>、<picture>和<img>的HTML输出，因此您的规则将受到该结构的继承和相关性的影响。换句话说，您没有使用该规则指向图像本身，因为结果HTML结构。

您应该指向<Img>，它实际上是一个包装器，而不是<img>。

  return (  
    <div>
      <Modal show={true} onHide={handleClose} centered className={ImagemodalStyles.imageModal} dialogClassName={ImagemodalStyles.imageModalDialog}>
        <Modal.Header closeButton />
        <Modal.Body>
          <Img className={ImagemodalStyles.imageModalBody} fluid={props.data.file.childImageSharp.fluid} />
        </Modal.Body>
      </Modal>
    </div>
  )

上面的代码段将添加(没有img)的差异：

.imageModalBody {
  max-height: calc(100vh - 225px);
}

到包装器，它可能修复或不修复问题，但至少会正确地应用规则。如果没有CodeSandbox，就很难知道出了什么问题，但是您将正确地应用这种解决方案的样式。

请始终记住，在使用gatsby-image时，<img>在其结果的HTML结构中非常重要，因此您的样式应该应用到它的外部包装器中。