Scale images in Angular Material grid

Question

I'm attempting to place images inside grid tiles in an Angular-Material based app I'm working on. My problem is that these images do not "fit" within their tiles. Below is an example. My image is large (2832x4256) and takes over the entire container rather than scaling to fit within its tile. How could I get images to scale to fit within their respective tiles in the grid?

<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1">
  <md-grid-tile class="green">
    <img src="resources/images/food-beer.jpg" alt="beer">
    <md-grid-tile-footer>
      <h3>first tile</h3>
    </md-grid-tile-footer>
  </md-grid-tile>
  <md-grid-tile class="blue">
    <md-grid-tile-footer>
      <h3>second tile</h3>
    </md-grid-tile-footer>
  </md-grid-tile>
  <md-grid-tile class="purple">
    <md-grid-tile-footer>
      <h3>third tile</h3>
    </md-grid-tile-footer>
  </md-grid-tile>
</md-grid-list>

Below is the result. What I'm aiming for instead is for the image to occupy the same amount of space as each of the blue and purple tiles.

Answer 1

If you want them to occupy the entire rectangle, I believe using the "layout-fill" attribute will also achieve that.

<img src="resources/images/food-beer.jpg" alt="beer" layout-fill>

Answer 2

It's been a year and the syntax has changed dramatically, but the problem remains. Here's how I solved this issue in an Angular 5/Angular Material 5 project.

For 2 columns and pictures that were 4600px x 3400px, I did the following:

In my css:

.tile-image {
  width:100%;
  height: auto;
}

In my html template:

<mat-grid-list cols="2" rowHeight="6:4">
  <mat-grid-tile>
      <img class="tile-image" src="../demo/tilePic1.jpg">
  </mat-grid-tile>