Pass <Img/> Gatsby to React Button to create full interactive images grid

Question

I try to make a full button grid of images with Gatsby that's almost work but when I pass the component <Img/> that's change a little the height of my button and add an empty line at the top or the button I don't know. I don't know why and I don't find any information about the solution to solve it. Here is a little piece of my code if it can help.

function Cell({ children, ...props }) {
  // ... code
  console.log("Cell() cell props", props.w, props.h)
  return (
    <div>
      <button
        onClick={toggle_cell}
        className="cell"
        style={set_button_style(props, is, mouse_is)}
      >
        {
          <Img
            fluid={children.childImageSharp.fluid}
            Tag="div"
          />
        }
      </button>
    </div>
  )
}

Style

const set_button_style = (props, select_is, mouse_is) => {
  let alpha = 0
  select_is ? (alpha = 1) : (alpha = 0.5)
  let border_is
  let hex_color = hsb_to_hex(0.5, 1, 0)
  mouse_is ? (border_is = `10px solid ${hex_color}`) : (border_is = `0`)
  return {
    background: `${hsb_to_hex(0, 0, 0)}`,
    opacity: alpha,
    width: `${props.w}px`,
    height: `${props.h}px`,
    border: border_is,
    padding: 0,
  }
}

An example to illustrate my problem: The size display by the Dev Tool React is 456px x 463px for the Cell and indicate 456px x 456px for Image, and the children props indicate h:456 w:456 like I wish. And the result is a non-acceptable beautiful yellow line :)

to see what's happen in live https://stanlab.netlify.app/grid_button_advanced/

Answer 1

If you add a height: 100% to the image itself and a width: 100% and height: 100% in the gatsby-image-wrapper it displays:

It's better to use relative variables rather than absolute or magic numbers to avoid these behaviours when styling, in most cases the image or the container will adapt its size to the wrapper if it's properly set.