Gatsby: objectPosition prop on `gatsby-image` does not appear to work

[lukebennett88]

Description

objectPosition prop on gatsby-image does not appear to work

Steps to reproduce

Clone the following repo: https://github.com/lukebennett88/objectPosition-bug-demo and run the dev server (cd into directory and run npm i && npm run develop).

Expected result

Use your dev tools to inspect the gatsby-astronaut image.
The gatsby-astronaut image should have an inline style of: object-position: top; to reflect the prop of objectPosition="top" on the following component: src/components/image.js

Actual result

The gatsby-astronaut image will have an inline style of: object-position: center; or object-position: center center; (depending on your browser.)

Environment

  System:
    OS: macOS 10.14.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 3.0.2 - /usr/local/bin/fish
  Binaries:
    Node: 11.14.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 73.0.3683.103
    Safari: 12.1
  npmPackages:
    gatsby: ^2.3.25 => 2.3.25 
    gatsby-image: ^2.0.39 => 2.0.39 
    gatsby-plugin-manifest: ^2.0.29 => 2.0.29 
    gatsby-plugin-offline: ^2.0.25 => 2.0.25 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 
    gatsby-plugin-sharp: ^2.0.35 => 2.0.35 
    gatsby-source-filesystem: ^2.0.29 => 2.0.29 
    gatsby-transformer-sharp: ^2.1.18 => 2.1.18 
  npmGlobalPackages:
    gatsby-cli: 2.5.9
    gatsby: 2.0.78

[LekoArts]

As per gatsby-image props the objectPosition only applies for:

Passed to the object-fit-images polyfill when importing from gatsby-image/withIEPolyfill. Defaults to 50% 50%.

If you want to modify the style I'd advise to use imgStyle. style will apply your CSS to the wrapper, not the img tag.

[lukebennett88]

Completely missed that, thanks Lennart!