如何解决盖茨比图像流体设置为最大高度
如何在 gatsby 中设置图像的高度?我的方法是这样的:
My query:
image {
fluid {
...GatsbyContentfulFluid_withWebp
}
}
My return:
<Img fluid={image.fluid} style={{ maxHeight: '200px' }} alt={title}></Img>
图像显示正常,但我查询了不止一张图像并且使用 style={{ maxHeight: '200px' }} 不适用于所有图像。一些高度不同的图像,我想显示所有高度相同的图像。
这样做的正确方法是什么?
解决方法
根据文档,您应该使用 imgStyle
属性将样式直接应用于基础 <img>
尝试类似的东西
<Img
fluid={image.fluid}
imgStyle={{ height: '200px',width: 'auto' }}
alt={title}>
</Img>
style
应用于 <img>
的包装器,您的图像可能会溢出它。
我认为您正在寻找固定的图像,而不是流动的:
My query:
image {
fixed {
...GatsbyContentfulFixed_withWebp
}
}
My return:
<Img fixed={image.fixed} style={{ height: '200px',width: 'auto' }} alt={title}></Img>
此外,使用 height
而不是 maxHeight
属性来强制所有图像的 height
为 200px
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。