Gatsby-image отображает img неверного размера на iPhone - PullRequest
0 голосов
/ 14 января 2020

Я работаю над проектом с использованием Gatsby. js и Netlify cms. Я начал с шаблона Kaldi: https://www.gatsbyjs.org/starters/netlify-templates/gatsby-starter-netlify-cms/

Я изменил изображение на целевой странице, и оно выглядит хорошо на устройствах android, на рабочем столе - как Ma c, так и P C - но изображение на iPhone не меняется. Я тестировал на iPhone 6, 8 и X.

Это выглядит так на android:

вывод Android

И так на dev-tools Google Chrome:

Google Chrome Dev-tools

Тем не менее, это получается так на iPhone :

Вывод iPhoneX

Изображение есть, вы можете увидеть его в альбомном режиме, но размер не изменится ...

Кто-нибудь еще сталкивался с этой проблемой?

Очень трудно исправить эту ошибку, если она хорошо выглядит в dev-tools.

Это запрос img:

childImageSharp {
            fixed(width: 1075, height: 800, quality: 100) {
              ...GatsbyImageSharpFixed
            }

А вот jsx:

< div
className = "full-width-image margin-top-0"
style = {
    {
      backgroundImage: `url(${
       !!image.childImageSharp
         ? image.childImageSharp.fixed.src
         : image
     })`,

      backgroundAttachment: `fixed`
    }
  } >

Если вы хотите увидеть код, пожалуйста, проверьте его на https://github.com/crydestaahl/gottsnack

Изображение вызывается в src / templates / index-page. js и файл стилей называется "all.sass"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...