gatsby-plugin-image@^1.1.1 layout: "constrained" doesn't constrain image to parent div height

[stlasalle]

Description

I am having trouble getting a <StaticImage /> div to use layout: "constrained" properly. The docs say If the screen or container size is less than the width of the image, it scales down to fit, maintaining its aspect ratio., however when placing my image in a CSS grid layout it is not obeying the sizes of the parent containers, instead loading the image at full height.

Steps to reproduce

Here is my minimal reproduction. It has instructions in the readme, but they are basically to just run yarn, yarn develop, and then go to localhost:8000 and see the image.

Expected result

the <StaticImage /> component should inherit its height from its parent divs

Actual result

the <StaticImage /> loads at full size

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 12.18.3 - /usr/local/opt/node@12/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/opt/node@12/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 86.0
    Safari: 12.1.2
  npmPackages:
    gatsby: ^3.0.1 => 3.1.1 
    gatsby-image: ^3.1.0 => 3.1.0 
    gatsby-plugin-image: ^1.1.1 => 1.1.1 
    gatsby-plugin-sharp: ^3.1.1 => 3.1.1 
    gatsby-plugin-styled-components: ^4.1.0 => 4.1.0 
    gatsby-source-filesystem: ^3.1.0 => 3.1.0 
    gatsby-transformer-sharp: ^3.1.0 => 3.1.0 
  npmGlobalPackages:
    gatsby-cli: 2.12.65

[LekoArts]

Hi!

Constrained is about the width of the container, you're talking about the height here. This is working as expected as the image has the property object-fit: cover;. You'll need to adjust your CSS to get your desired behavior.

[stlasalle]

Hi @LekoArts thanks for getting back to me and thanks for the explanation of objectFit. I'll figure out the CSS.