[Avatar] - fixed proportion on non-square images

[dleroux]

WHY are these changes introduced?

When non-square images were added as a an avatar, it would result in them becoming pill-shaped blobs. This fixes that problem.

WHAT is this pull request doing?

Adds height: 100% and object-fit: cover as styles to the image generated by the Avatar component.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, Avatar, Image, Stack} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Page title="Playground">
        <Stack>
          <Avatar size="large" initials="DL" customer />
          <Avatar
            size="large"
            initials="DL"
            source="https://cdn.pixabay.com/photo/2017/08/03/14/17/nature-2576508_960_720.jpg"
          />
          <Avatar
            size="large"
            initials="DL"
            source="https://images.unsplash.com/photo-1486875862166-34751ccac396?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
          />
          <Avatar size="large" initials="DL" source="https://avatars2=80&v=4" />
        </Stack>
      </Page>
    );
  }
}