Gatsby: [gatsby-image]は背景画像で機能しますか？

それがあなたのためにうまく機能していると聞いて素晴らしいです！

背景画像については、gatsby-imageデモサイトhttps://using-gatsby-image.gatsbyjs.org/をご覧ください。

それはあなたが望むものですか？

早速のお返事ありがとうございます！

gatsby-imageデモサイトで何が起こっているのかを確実に理解するために...

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のobject-fit / object-positionプロパティをサポートする手段が含まれていますか（ここでブラウザサポートの問題を参照してください： caniuse.com ）？

もしそうなら、CSSの背景画像を完全に避けることをお勧めしますか（ギャツビーの自動画像処理を利用するため）？ gatsby-imageを使用して、object-fit / object-positionプロパティを調整するための推奨されるアプローチはありますか？

そうでない場合、ギャツビーでbackground-size:cover背景画像を使用するための推奨されるクロスブラウザの方法はありますか？

@oolothコンポーネントは非常に新しいので、あなたの質問に対する私の答えは…好きなようにgatsby-imageを使って遊んで、見つけたものを報告してください:-)

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の両方に少し慣れていません。

（ところで、私は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

これは、小道具を使用して動的な値を設定する同じ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スタイルをオーバーライドするために必要です。

gatsby-imageが設定された高さの領域をカバーしていない限り、 object-fitおよびobject-positionプロパティを調整する必要がないことに注意してください。 これらのユースケースでは、通常、 object-fit: cover;は引き続き機能し、 object-position値を微調整する必要があります（gatsby-imageはデフォルトでcenter centerに設定します）。

2. object-fit / object-positionにIE9 +ポリフィルを追加します

上記のスタイルは、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()
}

注：私はポリフィルをアクティブにonInitialClientRenderポリフィルのための命令が活性化電話をかけるためにある"の前に</body> 、または_on DOM ready_"。 他の場所で、私が見た@KyleAMathewsはpolyfillsを実装することをお勧めしますonClientEntryそれが良いでしょう場合、私はないと確信しているので、代わりに（任意のコメント、カイル？）。

お役に立てば幸いです。

ああ、くそー、@ oolothに早く戻ってこなかったことをお詫びします！ あなたがそれを理解してくれてうれしいです！
戻ってきて、あなたの発見を書いてくれてありがとう！ 👍❤️

どういたしまして！

@stolinskiは、彼のチュートリアルの1つで同じ問題に
https://www.youtube.com/watch?v=zhM6C0P7VO0

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

はるかに簡単です！ @ grod220に感謝します。

簡単だった@ grod220 ...ありがとう😄

@entenそれは機能しますが、 gatsby-imageを使用して、 srcsetとsizes介して、各ビューポートサイズで適切なサイズの画像を配信することのパフォーマンス上の利点を見逃してしまいます。

私にとって、 gatsby-imageを使用して各画像の最適なコピーを簡単に配信できることは、ギャツビーの最高の機能です。 CSSの背景画像を使用する場合、これらの利点は利用できません。

@oolothこれをカバーしてくれてありがとう。 ギャツビー初心者はこちら。 スタイリングの説明の中で、実際の画像はどこに記載されていますか？

@ fucata55よろしくお願いします！

実際の画像は、最初にgraphqlを介してクエリを実行し、次にプロップとしてgatsby-imageコンポーネントのfluidまたはfixedプロップ（またはv1を使用している場合はそのsizes渡すものです。 resolutions小道具）。

次に、 gatsby-imageコンポーネントは、必要な画像のすべてのコピーを生成し、結果のHTMLの<img />に複雑なsizes属性を追加します。

gatsby-image使用方法（および画像の送信方法）のウォークスルーについては、v2の場合はこちらのgatsby-imageドキュメントを、v1の場合はこちらのドキュメントを参照してください（すばらしい）。

@oolothあなたの仕事はとても役に立ちました。 ありがとうございました。

「background-attachment：fixed;」を使用することはできますか？ もしそうなら、正確にどこに。 私はそれを動かすことができますが、サファリではできません。 それが機能するようになると、ページにコンポーネントを追加するまで、画像は見栄えが良くなります。 追加するコンポーネントが多いほど、画像は大きくなります。 それで、私はサファリの問題のためにポリフィルしますが、「background-attachment：fixed;」はもはやオプションではないか、そう思われます。 どんな助けでも大歓迎です。

@zachgaskin助けて

これはおそらくCSSの問題のようです（つまり、Gatsbyやgatsby-imageとは関係ありません）。 background-attachment: fixed使用経験があまりなく、問題が発生していないのではないかと思います。再記述。 この問題の最小限の複製へのリンクを投稿することができれば、私は喜んで見ていきます。

caniuse.comによると、 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
  }}
/>

ギャツビーの背景画像は一歩前進です...

スタイルで！importantを使用する代わりに、IEポリフィルを使用してgatsby-imageを直接インポートし、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 Background Image（上記）は、私の最後のプロジェクトで本当にうまくいきました。