Gatsby-image: укажите нужный размер изображения для разного разрешения

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

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

Запрос GraphQL:

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

Изображение Гэтсби:

<div className="intro intro-page intro-container">
    {configHowWeWork.childImageSharp.fluid && (
        <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;
}

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

Что я уже пробовал:

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

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

ИЗМЕНИТЬ: найдено только одно решение - создать квадратное изображение с размером max(width, height), но в моем случае это всегда ширина. Таким образом я добиваюсь хорошего качества с низким и высоким разрешением (например, для мобильных устройств и компьютеров), но трачу слишком много ресурсов:

  • При разрешении рабочего стола создается изображение 1920x1920, а размер контейнера - 1920x367.
  • С мобильным разрешением не так разбалансировано, но с высотой все же больше необходимого.

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

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


gatsby gatsby-image gatsby-plugin
person lezan    schedule 17.09.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я преодолел проблему с 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}
/>
person lezan    schedule 27.12.2020

arrow_upward
0
arrow_downward

Плавные изображения в 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% контейнера.

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

person Ferran Buireu    schedule 17.09.2020
comment
Он, спасибо, что нашли время ответить на этот вопрос. Я уже пытался использовать только maxWidth, чтобы избежать ограничения соотношения сторон (на самом деле то, что я вставил до того, как это осталось). Кроме того, если я добавлю srcSetBreakpoints, это не решит мою проблему, потому что gatsby-image (на самом деле резкое) по-прежнему генерирует изображение с соотношением сторон (размер 400x76). Я что-то упускаю? - person lezan; 18.09.2020
comment
Что произойдет, если вы просто установите значение minHeight? - person Ferran Buireu; 18.09.2020
comment
Без srcSetBreakpoints и object-fit: contain;, верно? minHeight на оболочке изображения или <img>? - person lezan; 18.09.2020
comment
Попробуйте добавить с помощью imgStyle, но не работает, результат тот же. - person lezan; 18.09.2020
comment
Вы можете попробовать еще один фрагмент GraphQL? - person Ferran Buireu; 20.09.2020
comment
Вы имеете в виду жидкий или фиксированный? Или просто без _withWebp? - person lezan; 21.09.2020