avatar aspect ratio

[robert-king]

plunkr not working,

but avatars are having their aspect ratios changes (cards and lists):

<img matListAvatar src="..." alt="...">

If my profile pictures aren't square, they get crushed/distorted into a different aspect ratio.

I'm on latest chrome on mac, using material 2.00-beta.12

"dependencies": {
"@angular/animations": "^4.4.5",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^4.4.5",
"@angular/compiler": "^4.4.5",
"@angular/core": "^4.4.5",
"@angular/forms": "^4.4.5",
"@angular/http": "^4.4.5",
"@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "^4.4.5",
"@angular/platform-browser-dynamic": "^4.4.5",
"@angular/router": "^4.4.5",
"@ng-idle/core": "^2.0.0-beta.12",
"@ng-idle/keepalive": "^2.0.0-beta.12",
"angular2-moment": "^1.7.0",
"bootstrap": "^3.3.7",
"core-js": "^2.5.1",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"ng2-signalr": "^2.1.1",
"ngx-bootstrap": "^1.9.3",
"rxjs": "^5.4.3",
"signalr": "^2.2.2",
"zone.js": "^0.8.18"
},
"devDependencies": {
"@angular/cli": "^1.4.7",
"@angular/compiler-cli": "^4.4.5",
"@angular/language-service": "^4.4.5",
"@types/jasmine": "2.5.45",
"@types/node": "^6.0.89",
"codelyzer": "~3.0.1",
"jasmine-core": "^2.8.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}

[josephperrott]

The plunker's have been fixed, could you provide a reproduction as I am not quite sure what you are seeing.

[robert-king]

plunker stil doesn't work for me:
https://plnkr.co/edit/rFjyBFVj7UydQ290YGGS?p=preview

e.g. click the edit in plunker button on https://material.angular.io/components/list/overview

[robert-king]

Here is an example:

<mat-list role="list">
  <mat-list-item role="listitem">
    <img mat-list-avatar src="https://upload.wikimedia.org/wikipedia/commons/9/93/Denali_National_Park_Polychrome_Mountains_Wide_17350px.jpg" alt="...">
    Item with distorted avatar if not perfectly square.
    </mat-list-item>
</mat-list>

https://stackblitz.com/edit/angular-m4rayy?file=app/list-overview-example.html

[robert-king]

I guess can use something like:

.example-header-image {
  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
  background-size: cover;
}

but would be nice if the list-avatar etc had the option to be automatically using cover

[robert-king]

actually it's quite hard using css background-image: url(..), because to get my images from the server with security, i need to use bearer tokens to get the image (e.g. use auth interceptor), and then I need to turn the blob into a link, sanatize / bypass security, etc etc. I created a pipe which works on [src], would have been quite nice to just use avatar & [src].

[odahcam]

I think that what ur trying to say is that avatars does not looks good if they're not a square image.

The list-avatar really distorts the image to get some squared picture.

This could be an issue, idk, but is really awful to see that distorted images.

[robert-king]

yeah, aspect ratio is changed to 1:1, which looks really bad unless you have a square image.

[robert-king]

i think something that would be useful is a circular image component that displays a circular image thats centered e.g.
<mat-circle-img [src]="..">
and it would have to use background: cover, or do it's own calculations to centre the image.