5

我正在建立一个 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 示例图像中的圆角是旧解决方案中引导类的残余,但它的存在并不影响所讨论的问题。

4

1 回答 1

5

看来,如果我向标签添加heightobject-fitCSS 属性<Img />,它会按我的意图工作。(在 Firefox 和 Chrome 中)

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

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

于 2020-07-25T06:54:51.700 回答