How to align image to left in angular material mat-card?

1
votes

I'm trying to aling image to left side in Angular material with mat-card component, however my image still have some margin (left, up, down). I assume it's because I've used mat-grid. So what should I do to solve this.

This is what I have: https://stackblitz.com/edit/angular6-material-components-demo-a3gaj2

And this is what I expect: al

3
cssangularangular-material

3 Answers

2
votes
<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>
        <div>Second</div>
        <div>Third</div>
        <div>Fourth</div>
      </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;
        }

        &:last-child {
          flex-direction: column;
          align-items: start;
          padding: 8px;
        }
      }
    }
}
1
votes

You just need to apply only this css to set image, this css set all image same size no matter it is small or big.

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

In example on <img> setted margin: 0 -16px 16px -16px; via .mat-card-image But negative margin is bad practice

Just add you own css selector on <mat-card> with padding: 0