diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md
index b834fbb723210..4d6a4d6dfae1b 100644
--- a/packages/gatsby-remark-images/README.md
+++ b/packages/gatsby-remark-images/README.md
@@ -50,12 +50,24 @@ plugins: [
| `linkImagesToOriginal` | `true` | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to false to disable this behavior. |
| `showCaptions` | `false` | Add a caption to each image with the contents of the title attribute, when this is not empty. Set this option to true to enable this behavior. |
| `sizeByPixelDensity` | `false` | Analyze images' pixel density to make decisions about target image size. This is what GitHub is doing when embedding images in tickets. This is a useful setting for documentation pages with a lot of screenshots. It can have unintended side effects on high pixel density artworks.
Example: A screenshot made on a retina screen with a resolution of 144 (e.g. Macbook) and a width of 100px, will be rendered at 50px. |
-| `wrapperStyle` | | Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;`. |
+| `wrapperStyle` | | Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;` or a function returning a style string which receives the information about the image you can use to dynamically set styles based on the aspectRatio for example. |
| `backgroundColor` | `white` | Set the background color of the image to match the background image of your design. |
| `quality` | `50` | The quality level of the generated files. |
| `withWebp` | `false` | Additionally generate WebP versions alongside your chosen file format. They are added as a srcset with the appropriate mimetype and will be loaded in browsers that support the format. Pass `true` for default support, or an object of options to specifically override those for the WebP files. For example, pass `{ quality: 80 }` to have the WebP images be at quality level 80. |
| `tracedSVG` | `false` | Use traced SVGs for placeholder images instead of the "blur up" effect. Pass `true` for traced SVGs with the default settings (seen [here][3]), or an object of options to override the defaults. For example, pass `{ color: "#F00", turnPolicy: "TURNPOLICY_MAJORITY" }` to change the color of the trace to red and the turn policy to TURNPOLICY_MAJORITY. See [`node-potrace` parameter documentation][4] for a full listing and explanation of the available options. |
+## dynamic wrapperStyle example
+
+```
+{
+ resolve: `gatsby-remark-images`,
+ options: {
+ maxWidth: 800,
+ wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
+ },
+}
+```
+
## Supported Formats
This plugin will support the following formats:
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
index ebf4cea08ed1b..e12de2a0888cf 100644
--- a/packages/gatsby-remark-images/src/index.js
+++ b/packages/gatsby-remark-images/src/index.js
@@ -235,13 +235,18 @@ module.exports = (
const ratio = `${(1 / fluidResult.aspectRatio) * 100}%`
+ const wrapperStyle =
+ typeof options.wrapperStyle === `function`
+ ? options.wrapperStyle(fluidResult)
+ : options.wrapperStyle
+
// Construct new image node w/ aspect ratio placeholder
const showCaptions = options.showCaptions && node.title
let rawHTML = `
+
${rawHTML}
${node.title}