How to disable flexible layout for hidden Angular material class

Question

In the angular cli dev environment, I created a grid list component with one fragment in a file called layout-grid.component.html:

<md-grid-list cols="4" rowHeight="100px">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    <app-splash></app-splash>
  </md-grid-tile>
</md-grid-list>

The grid element has a component built into it called app-splash that contains one image:

<img src="../assets/horse.jpg" alt="Horse">

When I launch the web application, I see an image in the middle of the tile, but with a gap around the edge. I want img to fill the tile. Using an inspector with Chrome, I found that the culprits are hidden classes:

.mat-grid-tile .mat-figure {
  align-items:center;
  bottom:0;
  display:flex;
  height:100%;
  justify-content:center;
  left:0;
  margin:0;
  padding:0;
  position:absolute;
  right:0;
  top:0;
}

and if you turn off the display: flex property I get the result that I need. How to disable it in my code? Installing css for the inline grid component for inline does nothing. Do I need to change typescript? layout-grid.component.ts is as follows:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-layout-grid',
  templateUrl: './layout-grid.component.html',
  styleUrls: ['./layout-grid.component.css']
})
export class LayoutGridComponent implements OnInit {

  tiles = [
    {text: 'One', cols: 4, rows: 10, color: 'lightblue'},
  ];

  constructor() { }

  ngOnInit() {
  }

Answer 1

/layout-grid.componet.css :

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
  display: block !important; /* or whichever you need */
}

angular css.