Блог

Я борюсь с Gatsby-image, чтобы обеспечить правильный размер изображения для разного разрешения. У меня есть изображение размером 1920×367 (ширина x высота), и проблема видна, когда размер окна небольшой (например, мобильный), потому что gatsy-image использует изображение размером 490×92 для покрытия контейнера размером 437×354.

Здесь вы можете увидеть изображение, когда размер окна большой. Здесь, когда размер окна невелик.

Запрос GraphQL:

 configHowWeWork: file(relativePath: { eq: "howwework/howwework-header.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 1920, maxHeight: 367) {
            ...GatsbyImageSharpFluid_withWebp
        }
    }
}
  

Gatsby-изображение:

 <div className="intro intro-page intro-container">
    {configHowWeWork.childImageSharp.fluid amp;amp; (
        <Img
            className="intro-background"
            fluid={configHowWeWork.childImageSharp.fluid}
            alt="alt"
        />
    )}
</div>
  

Соответствующий CSS:

 .intro-container {
    position: relative;
}

.intro-background {
    position: absolute!important;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    z-index: 0;
    overflow: hidden;
}
  

Вопрос: Как я могу избежать запроса изображения размером 490×92 (с тем же начальным соотношением сторон) и вместо этого предоставить изображение, которое может заполнить 437×354 (обрезка или обрезка — это то, что я хочу, но без увеличения масштаба) без увеличения высоты.

То, что я уже пробовал:

1. Я попытался использовать заливку по размеру в запросе gatsby, чтобы преодолеть ограничение соотношения сторон, но это не сработало.
2. Использование presentationSize.

Спасибо за ваш ответ.

РЕДАКТИРОВАТЬ: единственное найденное решение — создать квадратное изображение с размером max(width, height) , но в моем случае это всегда ширина. Таким образом, я добиваюсь хорошего качества при низком и высоком разрешении (например, для мобильных устройств и настольных компьютеров), но я трачу слишком много ресурсов:

• При разрешении рабочего стола создаваемое изображение имеет разрешение 1920×1920, но размер контейнера равен 1920×367.
• С мобильным разрешением это не так несбалансированно, но все же больше необходимого по высоте.

Я уверен, что мне чего-то не хватает, потому что не может быть так сложно просто создать отзывчивый широкий образ героя.

РЕДАКТИРОВАТЬ 2: я не могу понять, почему качество изображения хорошее, если я переключаюсь на мобильное разрешение с адаптивным режимом дизайна в Firefox, но качество плохое, если я использую разрешение, сопоставимое с предыдущим мобильным, но без адаптивного режима дизайна.

Я преодолел проблему с 3 изображениями и художественным направлением, я не могу сделать лучше, чем это.

Сначала выполните запрос изображений:

 headerLarge: file(relativePath: { eq: "image-L.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 1920, webpQuality: 100) {
            ...GatsbyImageSharpFluid_withWebp
            ...GatsbyImageSharpFluidLimitPresentationSize
        }
    }
}
headerMedium: file(relativePath: { eq: "image-M.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 900, webpQuality: 100) {
            ...GatsbyImageSharpFluid_withWebp
            ...GatsbyImageSharpFluidLimitPresentationSize
        }
    }
}
headerSmall: file(relativePath: { eq: "image-S.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 500, webpQuality: 100) {
            ...GatsbyImageSharpFluid_withWebp
            ...GatsbyImageSharpFluidLimitPresentationSize
        }
    }
}
  

Создайте массив исходных текстов:

 const sourcesImage = [
    {
        ...headerSmall.childImageSharp.fluid,
        media: '(max-width: 500px)',
    },
    {
        ...headerMedium.childImageSharp.fluid,
        media: '(max-width: 900px)',
    },
    {
        ...headerLarge.childImageSharp.fluid,
        media: '(max-width: 3840px)',
    },
];
  

Используйте исходники с gatsby-image:

 <Img
    fluid={sources}
/>
  

Текучие изображения в Gatsby растягиваются по всему контейнеру (например: для контейнера, максимальная ширина 800px которого равна, автоматические размеры будут: 200px , 400px , 800px , 1200px и 1600px ). Если вы хотите больше контролировать, какие размеры выводятся, вы можете использовать этот srcSetBreakpoints параметр. Применяется к вашему коду:

 configHowWeWork: file(relativePath: { eq: "howwework/howwework-header.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 1920, srcSetBreakpoints: [ 400, 600, 960, 1280, 1920 ]) {
            ...GatsbyImageSharpFluid_withWebp
        }
    }
}
  

Как вы можете видеть srcSetBreakpoints , это массив целых чисел с вашими пользовательскими значениями. Это придаст srcSet вашему изображению желаемые размеры.

Вы можете поиграть с ними, чтобы проверить, какие из них соответствуют вашим требованиям. Кроме того, я бы удалил этот maxHeight параметр, поскольку он может вызвать у вас запрос на ограничение, поскольку он ограничивает соотношение сторон вашего изображения небольшими размерами, оно автоматически рассчитывается с использованием maxWidth предоставленного.

Еще один способ, который может вам помочь, — изменить CSS object-fit на contain свойство в некоторых разрешениях, чтобы оно соответствовало 100% контейнера.

Ссылки / Интересные чтения:

• Документация по изображению Gatsby
• [gatsby-image] Можно ли передать пользовательское значение «размеры»?
• [gatsby-image] Масштабировать изображение по высоте контейнера