时间戳

首页 > 解决方案 > Gatsby 图像流体拉伸到超出容器的垂直尺寸

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

问题描述

我正在建立一个 gatsby 网站来展示我的照片。我想要每张照片的全屏页面，照片应该填满页面，但要尊重纵横比。

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

在文档中有声明

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

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

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

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 缩小以限制可用的垂直空间？

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

标签： gatsbygatsby-image

解决方案

看来，如果我向标签添加height和object-fitCSS 属性<Img />，它会按我的意图工作。（在 Firefox 和 Chrome 中）

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

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

推荐阅读