html - 垫图宽度填充

Question

我正在使用有角度的材料制作卡片，但由于某种原因，我无法让图像填充空间，如图所示，红色区域是我希望图像占用空间的地方。

html:

 <mat-card (click)="optionPicked()">

                      <img  mat-card-image [src]="backgroundImage">

                      <mat-card-subtitle>
                        <b>{{SubtitleHere}}</b>
                      </mat-card-subtitle>

                      <mat-card-content>

                      </mat-card-content>
 </mat-card>

CSS3：

.mat-card-image {
  width: 100%;
  margin: 0 -16px 16px -16px;
  padding: 0%;
}

标签： htmlcssangularangular-material

Answer 1

 .card {
    width: 400px;
    height: auto;
    background: red;
    margin: 20px auto;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

#image-container {
    background: #DDD;
}

.card-row {
    background: red;
    width: 100%;
    height: 100px;
}

.img {
    height: 100%;
    width: 100%;
}

<div class="card">
  <div class="card-row" id="image-container">
    <img src="https://i0.wp.com/mathblog.wpengine.com/wp    content/uploads/2017/03/image005.gif?zoom=1.25&resize=429%2C262&ssl=1" class="img">
  </div>
  <div class="card-row">
    <p>Some Text Here</p>
  </div>
  <div class="card-row">
    <p>Some Text Here</p>
  </div>
  <div class="card-row">
    <p>Some Text Here</p>
  </div>
</div>