Material-ui: [Avatar] Non-squared images

[waclock]

When I copy and paste the following code, this is the result I get:
<Avatar src="https://www.fillmurray.com/200/300" size={100} backgroundColor="rgba(0,0,0,0)" style={{border: 0}} />

Is there a way to "crop" non-square pictures? I want them to fit in the circle, not to stretch

[federicot]

You can use css property object-fit: cover

<Avatar style={{border: 0, objectFit: 'cover'}} src="https://www.fillmurray.com/200/300" size={100} backgroundColor="rgba(0,0,0,0)" />

[mbrookes]

As mentioned previously: https://github.com/callemall/material-ui/issues/4059#issuecomment-280134905.

This is a also a dupe of #5177, but since this one at least has an example (despite both ignoring the issue template), I'll close that one first.

[waclock]

@federicot That doesn't seem to be working. I would imagine the Avatar component could be wrapped in a div in order to make the image fit automatically the square div?

I know I can achieve this on my own, however it would be nice to use the Avatar component, instead of having to make one myself.

[waclock]

Shouldn't this be labeled as a bug? The component should render the image in a correct way I believe

[mbrookes]

@waclock You asked a question, (something we ask in several places including twice when you open an issue not to use github issues for), so it was marked as such.

Since the question has been answered twice now, I'm closing this. If you still feel strongly it's a feature that should be added to Avatar, please open an appropriately formatted issue, and we can discuss whether it's something we would accept a PR for, and in what form.

[waheed25]

i wnat to use square image instead of round image but i didn't find any prop for that is there any way to make image squared???

[federicot]

@waheed25 Do not use <Avatar> then, use <img> instead.

[waheed25]

thanks problem solved

[igorbt]

Actually, @federicot suggestion worked well for Material UI < 1.
For version 1, this bug appears on landscape images (portrait are fine). Here, an additional height: 100% needs to be added. I "fixed" this globally by this theme override:

export const theme = createMuiTheme({
  overrides: {
    MuiAvatar: {
      img: {
        // handle correctly non-square images
        objectFit: 'cover',
        height: '100%',
      },
    },
  },
});

You can use this fix if you don't want to support oldish browsers (see https://caniuse.com/#feat=object-fit). Otherwise you need to override Avatar's img styles with width: 'auto', height: '100%', when you know that there is a landscape image.

[oliviertassinari]

@igorbt I like your suggestion but we need IE11 support. Still, we need to ask ourselves, what's worse between:

1. The current status
2. What happen with @igorbt suggestion on IE11

@igorbt Solution

[igorbt]

@oliviertassinari so you want to include this fix in the library? This would help all the green browsers and we could provide a workaround for IE11 in docs. I could even think of a dynamic workaround for IE11 that would apply the fix if needed at mount time after inspecting image aspect ratio.

[oliviertassinari]

(2.) solution will make IE11 worse off and other browsers better off. The support for IE11 won't last for years. I would vote for adding @igorbt CSS into the core of the lib.