Я работаю над проектом с использованием 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"