Gif 打破了 Gatsby 网站的响应能力
Posted
技术标签:
【中文标题】Gif 打破了 Gatsby 网站的响应能力【英文标题】：Gif breaking the responsiveness of Gatsby site 【发布时间】：2021-05-17 17:38:16 【问题描述】：问题总结
我的博文中有两个 .gif 图片，它们破坏了我网站的响应能力，在移动设备上打开它们时似乎没有调整大小。虽然从电脑打开时它们似乎很好。
PC 视图：
移动端视图：
如您所见，在移动视图中，两个 .gif 图像的大小仍然相同，这会破坏页面的响应能力。有什么办法可以解决这个问题吗？
我用来在 .mdx 文件中包含 .gif 的语法是-
我的站点的 Config.js 文件：
require(`dotenv`).config(
path: `.env`,
)
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
module.exports =
siteMetadata:
siteTitle: `Khalid Saifullah`,
siteTitleAlt: `Khalid Saifullah - Blog`,
author: `@k_saifullaah`,
siteImage: `/my_banner.jpg`,
siteHeadline: `Khalid Saifullah - Blog`,
siteUrl: `https://khalidsaifullaah.github.io`,
siteDescription: `I'm Khalid - a CS undergrad student. I take great interest in Deep Learning research, visualizations, and photography.`,
,
plugins: [
// `gatsby-remark-mathjax`,
resolve: `@lekoarts/gatsby-theme-minimal-blog`,
// See the theme's README for all available options
options:
mdx: false,
feedTitle: `Khalid Saifullah - Blog`,
navigation: [
title: `Blog`,
slug: `/blog`,
,
title: `About`,
slug: `/about`,
,
title: `Portfolio`,
slug: `/portfolio`,
,
],
externalLinks: [
name: `Github`,
url: `https://github.com/khalidsaifullaah`,
,
name: `Twitter`,
url: `https://twitter.com/k_saifullaah`,
,
name: `Facebook`,
url: `https://www.facebook.com/ikhalidsaifullaah/`,
,
],
,
,
resolve: `gatsby-plugin-mdx`,
options:
gatsbyRemarkPlugins: [
`gatsby-remark-copy-linked-files`,
resolve: `gatsby-remark-images`,
options:
linkImagesToOriginal: false,
,
,
],
remarkPlugins: [ require('remark-math'), require('remark-html-katex') ]
,
resolve: `gatsby-transformer-remark`,
options:
plugins: [`gatsby-remark-copy-linked-files`],
,
,
resolve: `gatsby-plugin-google-analytics`,
options:
trackingId: process.env.GOOGLE_ANALYTICS_ID,
,
,
`gatsby-plugin-sitemap`,
resolve: `gatsby-plugin-manifest`,
options:
name: `Khalid Saifullah - Blog`,
short_name: `minimal-blog`,
description: `I'm Khalid - a CS undergrad student at United International University. I take great interest in Deep Learning research, visualizations, and photography. Another aspect of me is that I'm a cinephile`,
start_url: `/`,
background_color: `#fff`,
theme_color: `#6B46C1`,
display: `standalone`,
icons: [
src: `/android-chrome-192x192.png`,
sizes: `192x192`,
type: `image/png`,
,
src: `/android-chrome-512x512.png`,
sizes: `512x512`,
type: `image/png`,
,
],
,
,
`remark-math`,
`remark-html-katex`,
`gatsby-plugin-offline`,
`gatsby-plugin-netlify`,
shouldAnalyseBundle &&
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
options:
analyzerMode: `static`,
reportFilename: `_bundle.html`,
openAnalyzer: false,
,
,
].filter(Boolean),
您可以查看here帖子的实时版本
【问题讨论】：
【参考方案1】：问题page 上的 HTML 显示图 6(a) 和 6(b) 的 GIF 图像没有响应。
这是图 6(a) 的 HTML：
<th class="css-hep4zx"><img src="...gif" class="css-0"></th>
请注意，没有响应类。
这是一个响应式 PNG 图 3(a)，具有非常不同的标记：
<th class="css-hep4zx"><span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto;
margin-right: auto; max-width: 650px;">
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 100%; position: relative; bottom: 0px;
left: 0px; background-image: url(...); background-size: cover;
display: block;"
></span>
<img
class="gatsby-resp-image-image css-0"
src="(...).png"
style="width: 100%; height: 100%; margin: 0px; vertical-align: middle;
position: absolute; top: 0px; left: 0px;"
>
</span>
</th>
为什么会有 PNG 和 GIF 的区别？
为.png 和.gif 图像生成的非常不同的HTML 标记似乎是@987654322@ 插件的限制。来自文档：
支持的格式
此插件将支持以下格式：
• JPEG • PNG
结论：gatsby-remark-images 插件不会为 gif 生成响应式 HTML。
那么现在呢？
如果 gatsby-remark-images 插件不能制作响应式 GIF，是否有插件可以？
让我们尝试一个不同的插件，这里有一个示例 gif 来尝试：
使用 gatsby-remark-interactive-gifs 和推荐的 CSS 样式，生成如下 HTML：
/* CSS copied from `gatsby-remark-interactive-gifs` page */
.interactive-gif
.interactive-gif .embedded
position: relative;
width: 100%;
height: auto;
.interactive-gif .gif-container
position: absolute;
top: 0;
width: 100%;
height: 100%;
.interactive-gif .gif
width: 100%;
height: 100%;
cursor: pointer;
<div class="interactive-gif">
<div class="embedded"
style="padding-top: 56.28517823639775%">
<div id="nyancat.gif"
class="gif-container"
style="display: block;">
<img id="image-nyancat.gif"
class="gif"
data-original="https://i.stack.imgur.com/f7DcY.gif"
src="https://i.stack.imgur.com/f7DcY.gif">
</div>
</div>
</div>生成的 GIF 图像确实是响应式的，因此使用 gatsby-remark-interactive-gifs 似乎确实会产生响应式 GIF。
【讨论】：
那么，这是否意味着在 Gatsby 中无法使其具有响应性，而我不得不忍受它？ @KhalidSaifullah 也许还有另一个插件可以为您生成响应式 GIF。例如，请参阅我的答案的补充内容。 谢谢，但我找到了一种更简单的方法，它现在可以响应了。我刚刚集成了 Bootstrap，它们现在看起来很好，也许我会在单独的答案中编写解决方案，但感谢您的帮助！ @KhalidSaifullah 不错的选择，Bootstrap 让响应式布局变得非常简单。【参考方案2】：出现问题是因为您的布局包含在 <table> 标记中，并带有继承 display: table。这是一个 CSS 问题，因此您需要更改该表的规则，强制换行这些 gif。
如果你能够改变你的 HTML 结构，我会建议一个更灵活和简单的结构，例如：
<div className="your-flex-wrapper">
<img src="gif1"/>
<img src="gif2"/>
</div>
包装器应该有一个：
.your-flex-wrapper
display: flex;
flex-flow: row wrap;
我已将这些更改实时应用到您的网站（在 th 和 tr 标记中）并且：
但是，将display: flex 添加到表格布局中并不符合语义，因此最好相应地更改结构。
如果您将.gif 的宽度强制设置为小屏幕上视口的100%，它们将始终响应。
【讨论】：
【参考方案3】：我能够通过一个非常简单的解决方案来解决我的问题。我刚刚将 Bootstrap 集成到了我的 Gatsby 系统中，然后使用了一些基本的引导网格类来使 .gifs 具有响应性。
我解决它的方法：
首先，安装引导插件-
npm install react-bootstrap bootstrap
然后，在必要的地方导入插件（我已经将它导入到我的帖子的 .mdx 文件中，我已经在其中定义了这些 .gifs）-
import 'bootstrap/dist/css/bootstrap.min.css'
最后，我刚刚使用引导程序的方式来使这些 .gif 具有响应性（这就是我在 .mdx 文件中定义这些 .gif 的方式）-
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6">
<img src="./neural_net_data_manupulation_2.gif" style="width: 100%;"/>
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<img src="./neural_net_decision_boundary.gif" style="width: 100%;"/>
</div>
</div>
</div>
这就是他们现在的样子：
大屏（PC）- 小屏（移动）-【讨论】：
以上是关于Gif 打破了 Gatsby 网站的响应能力的主要内容，如果未能解决你的问题，请参考以下文章
如何在我的 Gatsby 博客网站中有效地显示 GIF 图像？
在 Netlify 上部署 gatsby 站点时响应错误的大小图像