Gatsby 图像流体延伸到超出容器的垂直尺寸

Question

我正在建立一个盖茨比网站来展示我的照片。我想要每张照片都有一个全屏页面，并且照片应该填满页面，但要尊重宽高比。

\n

问题在于，虽然横向拍摄的照片受到正确限制，但纵向拍摄的照片填满了所有水平空间，但溢出了垂直空间。

\n

在文档中有这样的声明

\n

\n

如前所述，使用流体类型的图像会被拉伸以匹配容器\xe2\x80\x99s 的宽度和高度

\n

\n

然而，我观察到的行为是它只拉伸以匹配宽度，而不是高度。

\n

我将问题简化为这个小示例，它尝试将图像包含在 400x400px 容器中：

\n

import React from "react"\nimport { graphql } from "gatsby"\nimport Layout from "../components/layout"\nimport Img from "gatsby-image"\n\nexport default (props) => {\n  const { data } = props;\n  return (\n    <Layout>\n      <div style={{height: "400px", width: "400px", background: "white" }}>\n        <Img fluid={ data.file.childImageSharp.fluid } />\n      </div>\n    </Layout>\n  )\n}\n\nexport const query = graphql`\n  query($id: String!) {\n    file(id: { eq: $id }) {\n      childImageSharp {\n        fluid(maxWidth: 500, maxHeight: 500, fit: INSIDE) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n`;\n

\n

在横向示例中，图像被限制为包含的 div 的宽度:\n

\n

在纵向示例中，图像填充了包含的 div 的整个宽度，变得太高：

\n

\n

如何使盖茨比图像缩小以限制可用的垂直空间？

\n

ps 示例图像中的圆角是旧解决方案中引导类的残留物，但它的存在并没有影响所讨论的问题。

\n

Answer 1

看起来，如果我向标签添加heightCSSobject-fit属性<Img />，它就会按我的预期工作。（在 Firefox 和 Chrome 中）

<Img
  style={{ height: "100%", width: "100%" }}
  imgStyle={{ objectFit: "contain" }}
  fluid={ data.file.childImageSharp.fluid }
/>

这给出了预期的结果，无论是在我的简化示例中，还是在实际的基于弹性盒的布局中。