Как выровнять изображение по левому краю в угловом материале мат-карты?

Question

Я пытаюсь расположить изображение на левой стороне в материале Angular с помощью компонента mat-card, однако мое изображение все еще имеет некоторый запас (влево, вверх, вниз).Я предполагаю, что это потому, что я использовал мат-сетку.Так что я должен сделать, чтобы решить это.

Вот что у меня есть: https://stackblitz.com/edit/angular6-material-components-demo-a3gaj2

И это то, что я ожидаю:

Answer 1

<mat-card class="home-card">
    <mat-card-content class="home-card-content">
      <img mat-card-image
        src="https://material.angular.io/assets/img/examples/shiba2.jpg"
        alt="Photo of a Shiba Inu">
      <div>Second</div>
    </mat-card-content>
</mat-card>

html {
    min-height: 100%;
}


body {
    height: 100%;
    margin: 0px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}


.home-card {
    border-radius: 4px;
    max-width: 600px;
    max-height: 1000px;
    margin-top: 100px;
    padding: 0;

    .mat-card-image {
      margin: 0;
      height: 100%;
    }

    .home-card-content {
      display: flex;
      justify-content: space-between;

      & > * {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: auto;
        max-width: 50%;

        &:first-child {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
      }
    }
}

Answer 2

Вам просто нужно применить только этот CSS для установки изображения, этот CSS установить все изображения одинакового размера, независимо от того, маленький он или большой.

object-fit: cover;
height: 100%;
width: 100%;
margin: 0;
padding: 0;

Answer 3

В пример в <img> установлено margin: 0 -16px 16px -16px; через .mat-card-image Но отрицательная маржа - плохая практика

Просто добавьте свой собственный селектор CSS на <mat-card> с помощью padding: 0