流体 Img 组件在链接组件下时正在收缩

如何解决流体 Img 组件在链接组件下时正在收缩

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

代码

前端部分

解决方法

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

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

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

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

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

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