在Angular Material网格中缩放图像

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

如果你想让它们占据整个矩形，我相信使用“layout-fill”属性也会实现这一点。

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

Answer 2

You could either do this with targeting the image in CSS or by setting it as a background image.

Here is the CSS method but the downside to this is as the aspect ratio is based on the images width, at some breakpoints the image may not fill the tiles height.

.green img {
    max-width: 100%;
    height: auto;
}

So going with a background image maybe a little better but this method isn't fully cross browser supported.

.green {
    background-image: url('folder/your-image.png');
    background-size: cover;
}

Answer 3

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>

Answer 4

All the answers are nice. But you can also try

<img src="resources/images/food-beer.jpg" style="object-fit: cover; height: inherit; width: inherit;">