fluid Img 组件在 Link 组件下方时正在收缩

Question

我目前正在为一个项目使用 gatsby，当我将 gatsby Img 组件放入 Link 组件中以便它可以点击时，图像会缩小到其父组件（link 组件）。我知道 gatsby fluid Img 会拉伸或缩小到其父级的宽度，但我希望它显示为完整图像。我尝试使用 fixed 而不是 fluid 但它不起作用，甚至尝试在查询时指定宽度。

代码

前端部分

Answer 1

这显然是一个 CSS 问题，因为您的 <Link> 正在缩小到文本 (sssssssssss) 长度。

调试您的 .thumbnail class 和组件以查看内部发生的情况。例如，像下面这样的 CSS 规则可以工作，但可能不符合您的设计规范：

.thumbnail{
   position: relative;
   width: 100%;
}

.thumbnail a,
.thumbnail img {
   width: 100%;
}

查看结果 HTML 输出并调整您的选择器，因为 gatsby-image 将 <Img> 包裹在嵌套结构中，可能会影响您的 CSS 规则.

您似乎正在使用 Bootstrap（因此使用 w-100），因此尝试将其添加到包装器（<Link> 组件），

fluid Img 组件在 Link 组件下方时正在收缩

fluid Img component is shrinking when its under Link component

graphql

gatsby

gatsby-image