【发布时间】：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帖子的实时版本
【问题讨论】：
标签： javascript css gif