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

Question

我正在建立一个 gatsby 网站来展示我的照片。我想要每张照片的全屏页面，照片应该填满整个页面，但要注意宽高比。

问题是虽然横向拍摄的照片被正确限制，但纵向拍摄的照片填满了所有水平 space 但溢出了垂直 space。

As mentioned previously, images using the fluid type are stretched to match the container’s width and height

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

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

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Img from "gatsby-image"

export default (props) => {
  const { data } = props;
  return (
    <Layout>
      <div style={{height: "400px", width: "400px", background: "white" }}>
        <Img fluid={ data.file.childImageSharp.fluid } />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($id: String!) {
    file(id: { eq: $id }) {
      childImageSharp {
        fluid(maxWidth: 500, maxHeight: 500, fit: INSIDE) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

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

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

如何让 Gatsby Image 缩小到可用的垂直方向 space？

p.s。示例图像中的圆角是旧解决方案 bootstrap class 的残余，但它的存在并未影响所讨论的问题。

Answer 1

看来，如果我将 height 和 object-fit CSS 属性添加到 <Img /> 标记，它就会按我的意图工作。（在 Firefox 和 Chrome 中）

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

这在我的简化示例和实际的基于 flex-box 的布局中都给出了预期的结果。

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

Gatsby image fluid stretches to beyond the vertical size of the container

gatsby

gatsby-image