将 objectFit 与 gatsby-plugin-image 中的 StaticImage 结合使用

Question

我在网络应用程序中使用 gatsby-plugin-image 的 StaticImage 组件，但在将 objectFit 的属性从“cover”更改为“contain”时遇到问题。

这是我的代码示例：

import React from 'react'

import { Container, Row, Col } from 'react-bootstrap'

import { StaticImage } from 'gatsby-plugin-image'

export default function About() {
    return (
        
         <div id="about">
             <Container fluid >
                 <Row className="justify-content-center align-items-center">
                     <Col md={12} >
                        
                        <StaticImage src="../images/coolImage.JPG" objectFit="contain" alt="Profile Picture" />
                        
                    </Col>
                </Row> 
            </Container>
        </div>
            
        
    )
}

我还尝试使用

style={{ objectFit: 'contain' }}

和

imgStyle={{ objectFit: 'contain' }}

来看看使用这些道具是否会改变样式。我也使用 Sass 来设计网站的其他部分，并且通过 Sass 和类名添加该样式选项也不起作用。

关于为什么默认的

object-fit: 'cover'

不会改变有什么想法吗？

Answer 1

有一个属性“objectFit”（以及“objectPosition”）可以直接传递给 StaticImage。我会尝试一下。我的猜测是您传递的样式在 StaticImage 内被覆盖，但传递直接道具可以修复它。 https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/

Answer 2

我必须添加

style={{height: "100%"}}

作为

StaticImage

的道具，才能使图像覆盖整个视图高度的容器。图像包装器不会自动占用容器元素的整个空间。

Answer 3

你有没有弄清楚这一点？我面临着同样的问题rn

<div
        style={{
          display: 'flex',
          justifyContent: 'flex-start',
          alignItems: 'end',
          gap: '15px',
          marginBottom: '3em',
        }}
      >
        <StaticImage
          src="../images/logos/nardi.png"
          alt="nardi"
          width={90}
          height={90}
          objectFit="contain"
        />
        <h2 style={{ margin: 0, lineHeight: '0.8em', fontSize: '3em' }}>
          Nardi:
        </h2>
      </div>

我检查了开发人员控制台中的元素，甚至尝试更改那里的对象适合模式，但没有任何效果

这就是静态图像的渲染方式，我期望徽标（横向格式）缩小，直到其宽度为 90，高度为相应的宽高比。实际图形是 800x202px 顺便说一句