Components: md-card-avatar in card header is broken in beta 2

[chpasha]

Bug, feature request, or proposal:

bug

What is the expected behavior?

the avatar image in card header should be 40 x 40 px

What is the current behavior?

it stretches to fit the whole image instead

What are the steps to reproduce?

http://plnkr.co/edit/96XQPx0ic3kbxOuOM3Mk?p=preview

Which versions of Angular, Material, OS, browsers are affected?

the regression was introduced in beta2 of material lib

Is there anything else we should know?

I don't get why it doesn't work, the source could looks ok to me, but the mat-card-avatar class is never applied. applying it manually solves the issue

[erlopezh]

Hi, (sorry my bad english)

Using card example (material.angular.io/components/component/card)
<div md-card-avatar class="example-header-image"></div>
The div height is 40px, but width value is in 0.

I set width value in .css file like this:

.example-header-image { background-image: url('assets/img/examples/shiba1.jpg'); background-size: cover; width: 40px; }

This solve the issue.

[stefanaerts]

in previous material versions it was this
[md-card-avatar] {
height: $md-card-header-size;
width: $md-card-header-size;
border-radius: 50%;
}
now its this
.mat-card-avatar {
height: $md-card-header-size;
width: $md-card-header-size;
border-radius: 50%;
}

so if you use class="mat-card-avatar" instead of md-card-avatar
it will work

[BhavnaSonawane]

it worked but there is the warning that Can't read file '/src/app/layout/search-candidate/assets/images/5.png', ignoring

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}