Creating image links: wrapping <Image> with <Anchor> causes image to render full size, ignoring parent <Box>

Expected Behavior

Anchor should have no effect on sizing of children

Actual Behavior

Wrapping <Image> with <Anchor> causes image to render full size, ignoring parent <Box> height and width.

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/grommet-github-issue-3186-0m2dl (see src/Image.js and https://0m2dl.codesandbox.io/image)

[Mr-Magnificent]

I believe max-width: 100%; max-height: 100% on styled.img in src/js/components/Image/StyledImage.js could solve the issue? Can I take this up?

[halocline]

@markjackson02 – I looked into this and think there are a couple of options here, but my recommendation would be to move the Anchor so that it contains the Box and Image, rather than the Anchor being placed in between the Box and Image.

<Anchor>
  <Box height="small" width="small" >
    <Image fit="cover" />
  </Box>
</Anchor>

I have modified your CodeSandbox example to demonstrate: https://codesandbox.io/s/grommet-github-issue-3186-gingn?file=/src/Image.js

Explanation If we were to perform the same implementation in pure HTML/CSS, we would run into a similar issue where an <a> in between a <div> and <img>. This is because <a> is an inline element and receives it dimensions from its contents. When the anchor is immediately wrapping the image, there is nothing (outside of the source file) setting the image’s dimension. The solution here would be similar: <a><div><img /></div></a>.

There is a newer CSS spec recommendation for display: contents which when applied to the anchor would achieve the desired results, but it is not production ready and still has accessibility issues: https://caniuse.com/#feat=css-display-contents & https://developer.mozilla.org/en-US/docs/Web/CSS/display

@markjackson02 Can you checkout the modified CodeSandbox and confirm this alternate approach solves your needs?