bug(mat-card): Picture elements on mat-cards have incorrect top-margin, when no heading is present

[Trombach]

Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/components-issue-5lp7n2?file=src/app/example-component.html

Steps to reproduce:

1. Create a <mat-card> element with no title, or subtitle
2. Add a <picture> element with at least one <source> element

<mat-card>
  <picture>
    <source
      srcset="https://material.angular.io/assets/img/examples/shiba2.jpg"
    />
    <img mat-card-image />
  </picture>
</mat-card>

Expected Behavior

What behavior were you expecting to see?

The top of the image should be flush with the top edge of the card, just like when using an <img/> tag

Actual Behavior

What behavior did you actually see?

There was a gap between the top edge of the card and the image. This is due to how the css class that overwrites the padding of the card is applied here.

Environment

• Angular:
• CDK/Material: 12.2.7
• Browser(s): Chrome 94, Safari 15
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

I've submitted #23678 to fix it. Note that you'll also have to move the mat-card-image attribute to the picture element itself.

[Trombach]

@crisbeto Thanks for the quick fix! Much appreciated

[angular-automatic-lock-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.}