[gatsby-remark-images] Can't specify max-width

[birjj]

Description

When using gatsby-remark-images, it is impossible to specify a custom max-width using the wrapperStyle option. The specified width will always be overwritten by the presentationWidth returned by gatsby-plugin-sharp.

This is problematic in cases where you want your max-width specified in non-pixel units. One such case is when you want your images to be fluid relative to the viewport height (used in the below examples).

A good starting point for debugging is where the style is specified

Steps to reproduce

Add gatsby-remark-images to your site, using a config specifying both maxWidth (required) and a wrapperStyle containing max-width. An example is:

{
    resolve: `gatsby-remark-images`,
    options: {
        maxWidth: 1920,
        // intended to make image have max-height of 100vh - cannot use max-height as the placeholder depends on width
        wrapperStyle: fluid => `max-width:${(fluid.aspectRatio * 100).toFixed(2)}vh !important;`,
    }
}

Expected result

The specified max-width is used (up for debate whether it should require !important)

Actual result

max-width is always set to the presentationWidth returned by gatsby-plugin-sharp (in this case 1920px).

Environment

Result of gatsby info

  System:
    OS: Linux 5.1 Arch Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i5-4200U CPU @ 1.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 11.15.0 - /usr/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.9.2 - /usr/bin/npm
  Languages:
    Python: 3.7.3 - /usr/bin/python
  Browsers:
    Firefox: 67.0.4
  npmPackages:
    gatsby: ^2.3.25 => 2.13.4 
    gatsby-image: ^2.0.37 => 2.2.4 
    gatsby-plugin-glslify: ^1.0.0 => 1.0.0 
    gatsby-plugin-manifest: ^2.0.28 => 2.2.1 
    gatsby-plugin-offline: ^2.0.25 => 2.2.1 
    gatsby-plugin-prefetch-google-fonts: ^1.4.2 => 1.4.2 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.1.0 
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.1 
    gatsby-plugin-sass: ^2.0.11 => 2.1.0 
    gatsby-plugin-sharp: ^2.0.32 => 2.2.2 
    gatsby-plugin-styled-components: ^3.0.7 => 3.1.0 
    gatsby-remark-copy-linked-files: ^2.1.0 => 2.1.0 
    gatsby-remark-external-links: 0.0.4 => 0.0.4 
    gatsby-remark-images: ^3.1.3 => 3.1.3 
    gatsby-source-filesystem: ^2.0.29 => 2.1.2 
    gatsby-transformer-remark: ^2.3.8 => 2.6.0 
    gatsby-transformer-sharp: ^2.1.17 => 2.2.1 

[birjj]

A fixed version of gatsby-remark-images can be found at birjolaxew/gatsby-remark-images#fix/15578 - I am not familiar with the way the Gatsby repo is structured, so I will let someone else perform a PR.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!