Gif 破坏了 Gatsby 网站的响应能力
Gif breaking the responsiveness of Gatsby site
问题总结
我的博客 post 中有两张 .gif 图片，它们破坏了我网站的响应能力，在移动设备上打开时它们似乎没有调整大小。虽然从电脑上打开它们似乎没问题。
电脑浏览:
手机浏览：
如您所见，在移动视图中，两个 .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),
}
你可以看看posthere
的现场版
问题 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 标记似乎是 gatsby-remark-images 插件的限制。来自文档：
Supported Formats
This plugin will support the following formats:
• 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。
出现问题是因为您的布局包含在 <table> 标签中，带有继承 display: table。这是一个 CSS 问题，因此您需要更改 table 的规则，强制换行这些 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 添加到 table 布局不是语义，因此，最好相应地更改结构。
如果您将 .gif 的宽度强制设置为小屏幕视口的 100%，它们将始终响应。
我能够通过一个非常简单的解决方案解决我的问题。我刚刚将 Bootstrap 集成到我的 Gatsby 系统中，然后使用一些基本的 bootstrap 网格 类 使 .gifs 响应。
我的解决方法：
首先，安装bootstrap插件-
npm install react-bootstrap bootstrap
然后，在必要的地方导入插件（我已经在我定义的 post 的 .mdx 文件中导入了它那些.gif)-
import 'bootstrap/dist/css/bootstrap.min.css'
最后，我刚刚使用 bootstrap 做事的方式让这些 .gif 响应（这就是我定义那些 .gif 的方式）。 gif 在我的 .mdx 文件中）-
<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)-
- 小屏（手机）-
问题总结
我的博客 post 中有两张 .gif 图片，它们破坏了我网站的响应能力，在移动设备上打开时它们似乎没有调整大小。虽然从电脑上打开它们似乎没问题。
电脑浏览:
手机浏览：
如您所见，在移动视图中，两个 .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),
}
你可以看看posthere
的现场版问题 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 标记似乎是 gatsby-remark-images 插件的限制。来自文档：
Supported Formats
This plugin will support the following formats:
• 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。
出现问题是因为您的布局包含在 <table> 标签中，带有继承 display: table。这是一个 CSS 问题，因此您需要更改 table 的规则，强制换行这些 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 添加到 table 布局不是语义，因此，最好相应地更改结构。
如果您将 .gif 的宽度强制设置为小屏幕视口的 100%，它们将始终响应。
我能够通过一个非常简单的解决方案解决我的问题。我刚刚将 Bootstrap 集成到我的 Gatsby 系统中，然后使用一些基本的 bootstrap 网格 类 使 .gifs 响应。
我的解决方法：
首先，安装bootstrap插件-
npm install react-bootstrap bootstrap然后，在必要的地方导入插件（我已经在我定义的 post 的 .mdx 文件中导入了它那些.gif)-
import 'bootstrap/dist/css/bootstrap.min.css'最后，我刚刚使用 bootstrap 做事的方式让这些 .gif 响应（这就是我定义那些 .gif 的方式）。 gif 在我的 .mdx 文件中）-
<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)-
- 小屏（手机）-