Gatsby: [gatsby-image]는 배경 이미지와 함께 작동합니까?

잘 작동하고 있다는 소식을 듣게 되어 기쁩니다!

배경 이미지는 gatsby-image 데모 사이트 https://using-gatsby-image.gatsbyjs.org/를 확인하세요.

너가 원하는게 그거야?

빠른 답변 감사합니다!

개츠비 이미지 데모 사이트에서 무슨 일이 일어나고 있는지 확실히 하기 위해...

1. background-image 를 사용하는 대신 gatsby-image 는 항상 <img /> 하고 배경 이미지는 position: absolute; 사용하여 시뮬레이션됩니까?
2. background-size/background-position 를 사용하여 이미지를 배치하는 대신 gatsby-image는 항상 object-fit/object-position 합니까?

모든 최신 브라우저에서 제대로 표시되는 한 모든 이미지에 대해 이러한 방식으로 gatsby-image를 사용하게 되어 매우 기쁩니다... Gatsby에는 IE 11 및 Edge( 여기에서 브라우저 지원 문제를 참조하십시오: caniuse.com )?

그렇다면 CSS 배경 이미지를 완전히 피하는 것이 좋습니다(Gatsby의 자동화된 이미지 처리를 활용하기 위해)? gatsby-image를 사용하여 object-fit/object-position 속성을 조정하는 데 권장되는 접근 방식이 있습니까?

그렇지 않은 경우 Gatsby에서 background-size:cover 로 배경 이미지를 사용하는 권장되는 크로스 브라우저 방법이 있습니까?

@ooloth 구성 요소는 매우

CSS 배경 이미지는 크기가 다른 장치에 대해 여러 축소판 크기를 (쉽게) 추가할 수 없기 때문에 문제가 됩니다. 그러나 미디어 쿼리를 사용하여 이 문제를 해결할 수 있습니다.

ㅋ. 이해했다. 그리고 할 것이다. 당신의 도움을 주셔서 감사합니다!

다른 사람이 다음에 대한 모범 사례를 공유하고 싶다면 매우 관심이 있습니다.

1. IE 11 및 Edge에서 object-fit/object-position 를 지원하는 방법(Gatsby에서 이미 지원합니까?)
2. object-fit/object-position 값을 조정하는 방법은 무엇입니까?

1.에 관해서는 https://github.com/bfred-it/object-fit-images를 살펴보십시오.

@fk 폴리필 감사합니다! 10월 16일 현재 Edge는 object-fit/object-position 를 지원하지만 IE11은 여전히 ​​도움이 필요합니다.

한가지 조언 부탁드려도 될까요? 폴리필을 설치하고 가져오는 방법을 확실히 알고 있습니다...
npm install --save object-fit-images
import objectFitImages from 'object-fit-images'

..하지만 활성화 호출을 어디로 해야 할지 잘 모르겠습니다.
objectFitImages()

이 줄을 어디에 둘지 추천해 주시겠습니까? 나는 React와 Gatsby 모두에 약간 익숙합니다.

(Btw, 나는 object-fit/object-position 값을 조정하는 방법을 알아냈고 폴리필과 CSS 조정을 추가하는 것을 정렬하는 즉시 해당 코드를 공유할 것입니다.)

좋습니다. 몇 가지 실험을 했고 배경 이미지에 gatsby-image를 사용하는 효과적인 솔루션을 찾았습니다. gatsby-image의 기능이 인라인 이미지에만 사용하기에는 너무 좋기 때문에 이 문제에 대해 고민하는 다른 사람과 이것을 공유하고 싶었습니다!

나를 위해 일한 것은 다음과 같습니다.

1. CSS 스타일 추가

스타일을 추가하기 전에 gatsby-image 구성 요소가 다음 HTML을 출력한다는 것을 아는 것이 좋습니다.

<div class="gatsby-image-outer-wrapper">
  <div class="gatsby-image-wrapper">
    <div></div>
    <!-- Placeholder (hidden after main image loads) -->
    <img style="...object-fit: cover; object-position: center center;">
    <!-- Main image -->
    <img style="...object-fit: cover; object-position: center center;">
  </div>
</div>

gatsby-image에 직접 설정된 스타일은 <div class="gatsby-image-wrapper> 적용됩니다. 이미지 자체에 적용하려는 스타일은 <img> 태그를 대상으로 하는 자식 선택기를 사용해야 합니다.

gatsby-image가 CSS 배경 이미지처럼 작동하도록 하려면 다음 스타일을 추가하십시오(여기서 gatsby-plugin-styled-components를 사용 했습니다).

import React from 'react'
import Image from 'gatsby-image'
import styled from 'styled-components'

const BgImage = styled(Image)`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 100vh; // or whatever

  // Adjust image positioning (if image covers area with defined height) and add font-family for polyfill
  & > img {
    object-fit: cover !important; // or whatever
    object-position: 0% 0% !important; // or whatever
    font-family: 'object-fit: cover !important; object-position: 0% 0% !important;' // needed for IE9+ polyfill
  }
`

export default BgImage

다음은 props를 사용하여 동적 값을 설정하는 동일한 BgImage 구성 요소의 버전입니다.

import React from 'react'
import Image from 'gatsby-image'
import styled from 'styled-components'

const BgImage = styled(Image)`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: ${props => props.height || 'auto'};

  // Adjust image positioning (if image covers area with defined height) and add font-family for polyfill
  & > img {
    object-fit: ${props => props.fit || 'cover'} !important;
    object-position: ${props => props.position || '50% 50%'} !important;
    font-family: 'object-fit: ${props => props.fit || 'cover'} !important; object-position: ${props => props.position || '50% 50%'} !important;'
  }
`

export default BgImage

여기서 !important 를 사용하는 것은 이상적이지는 않지만 인라인 object-fit/object-position 스타일을 재정의하는 데 필요합니다.

object-fit 및 object-position 속성은 gatsby-image가 설정된 높이의 영역을 포함하지 않는 한 조정할 필요가 없습니다. 이러한 사용 사례의 경우 object-fit: cover; 일반적으로 여전히 작동하며 object-position 값을 조정하면 됩니다(gatsby-image는 기본적으로 center center 로 설정합니다).

2. 개체 맞춤/개체 위치에 대한 IE9+ Polyfill 추가

위의 스타일은 IE를 제외한 모든 브라우저에서 작동합니다( caniuse.com: object-fit/object-position 참조 ). 불행히도 IE에서는 object-fit/object-position 가 작동하지 않으며, 높이가 설정된 배경 이미지는 컨테이너를 채우도록 늘어나 이미지가 왜곡됩니다.

다행히도 IE9+에서 이 문제를 해결하는 폴리필이 있습니다 . 있습니다 . (이 점을 지적해 주신 @fk 에게 감사드립니다.)

폴리필을 구현하는 방법은 다음과 같습니다.

1. CSS에 추가 font-family 선언을 포함했는지 확인하십시오(위 참조).
2. 프로젝트에 폴리필 설치: npm install —save object-fit-images
3. 프로젝트 루트에 gatsby-browser.js 파일 생성
4. gatsby-browser.js 다음을 추가하십시오.

import objectFitImages from 'object-fit-images'

exports.onInitialClientRender = () => {
  objectFitImages()
}

참고: polyfill의 지침 이 " </body> 또는 _on DOM ready_"에 활성화 호출을 배치하는 것이기 때문에 onInitialClientRender 에서 폴리필을 활성화했습니다. 한편, 내가 본 @KyleAMathews는 polyfills가 구현하는 것이 좋습니다 onClientEntry 그게 더 좋을 거라 만약 내가하지 확신, 그래서 대신 (귀하의 의견, 카일?).

도움이 되기를 바랍니다!

아 젠장, @ooloth 더 일찍 돌아오지 못해 죄송합니다! 다행이군요!
돌아와서 결과를 작성해 주셔서 감사합니다! 👍 ❤️

천만에요!

@stolinski 는 그의 튜토리얼 중 하나에서 동일한 문제에
https://www.youtube.com/watch?v=zhM6C0P7VO0

<Img
  sizes={dataSizes}
  style={{
    position: "absolute",
    left: 0,
    top: 0,
    width: "100%",
    height: "100%"
  }}
/>

훨씬 간단합니다! @grod220님 감사합니다.

@grod220 쉬웠어요 ... 감사합니다 😄

@enten 그것은 효과가 있지만 srcset 및 sizes 를 통해 각 뷰포트 크기에서 적절한 크기의 이미지 버전을 제공하기 위해 gatsby-image 를 사용하면 성능상의 이점을 놓치게 됩니다. sizes 속성.

저에게 gatsby-image 를 사용하여 각 이미지의 최적의 사본을 쉽게 전달할 수 있는 기능은 Gatsby의 최고의 기능입니다. CSS 배경 이미지를 사용하는 경우 이러한 이점을 사용할 수 없습니다.

@ooloth 취재해 주셔서 감사합니다. 여기 개츠비 초보자입니다. 스타일링 지침에서 실제 이미지가 언급된 위치는 어디인가요?

@fucata55 반갑습니다!

실제 이미지는 먼저 graphql을 통해 쿼리한 다음 gatsby-image 구성 요소의 fluid 또는 fixed 소품(또는 v1을 사용하는 경우 sizes 또는 resolutions 소품).

그러면 gatsby-image 구성 요소가 필요한 이미지의 모든 복사본을 생성하고 복잡한 sizes 속성을 결과 HTML의 <img /> 에 추가합니다.

gatsby-image 를 사용하고 이미지를 보내는 방법에 대한 연습을 보려면 여기 v2의 경우 gatsby-image 문서를 참조 하거나 v1의 경우 여기 (훌륭합니다)를 참조하세요.

@ooloth 귀하의 작업은 매우 도움이 되었습니다. 감사합니다.

"background-attachment: fixed;"를 사용할 수 있습니까? 그렇다면 정확히 어디에. 나는 그것을 작동시킬 수 있지만 사파리에서는 그렇지 않습니다. 작동시키면 페이지에 구성 요소를 더 추가할 때까지 이미지가 좋아 보입니다. 더 많은 구성 요소를 추가할수록 그림이 커집니다. 그래서 사파리 문제에 대해 폴리필을 했지만 "background-attachment: fixed;"는 더 이상 옵션이 아니거나 그렇게 보입니다. 도움을 주시면 감사하겠습니다.

@zachgaskin 도움이 되었으면 합니다!

이것은 아마도 CSS 문제인 것 같으며(즉, Gatsby 또는 gatsby-image 와 관련이 없음) background-attachment: fixed 사용한 경험이 많지 않고 유감스럽게도 문제가 발생하지 않았습니다. 다시 설명합니다. 이 문제를 최소한으로 재현한 링크를 게시할 수 있다면 기꺼이 살펴보겠습니다.

caniuse.com 에 따르면 iOS Safari는 background-attachment: fixed 지원하지 않지만 macOS Safari는 작동해야 합니다(...).

특정 브라우저가 동일한 CSS를 다르게 취급하는 이유를 분류하는 것은 정말 고통스러울 수 있습니다. 행운을 빕니다!

@zachgaskin @ooloth 나도 이것을 발견했습니다. 이상적이지는 않지만 제가 생각해낸 해결책은 이미지에 position: 'fixed' 를 추가하는 것입니다. 그러나 이것은 전체 페이지의 배경에 있음을 의미합니다. 다른 모든 곳에서 지정된 배경이 있는지 확인해야 합니다. z-index: -1 는 다른 배경 뒤에 숨겨져 있는지 확인합니다.

<Img
  sizes={dataSizes}
  style={{
    position: "fixed",
    left: 0,
    top: 0,
    width: "100%",
    height: "100%",
    z-index: -1
  }}
/>

개츠비 배경 이미지 는 한 걸음 더 나아간 것입니다 ...

IE polyfill을 사용하여 직접 gatsby-image를 가져오고 스타일에 !important를 사용하는 대신 objectFit 및 objectPosition을 소품으로 적용하는 것이 유용할 수 있습니다.

import Img from 'gatsby-image/withIEPolyfill'

<Img
      fixed={heroImage.childImageSharp.fixed}
      style={{ width: '100%', height: '100%' }}
      objectFit="cover"
      objectPosition="bottom left"
   />

감사합니다, @AronBe

나는 현재 Gatsby와 함께 일하고 있지 않기 때문에 최신 정보를 모릅니다. 그러나 Gatsby Background Image(위에서 언급함)는 내 마지막 프로젝트에서 실제로 나를 위해 트릭을 수행했습니다.