在角度材质网格

Question

我试图在基于Angular-Material的应用程序中将图像放在网格图块中。我的问题是这些图像不适合＆＃34;在他们的瓷砖内。以下是一个例子。我的图像很大（2832x4256）并接管整个容器，而不是缩放以适应其瓷砖。我怎样才能将图像缩放以适应网格中各自的图块？

<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>

以下是结果。我的目标是让图像占据与每块蓝色和紫色瓷砖相同的空间。

Answer 1

如果你想让它们占据整个矩形，我相信使用＆＃34; layout-fill＆＃34;属性也将实现。

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

Answer 2

您可以通过在CSS中定位图片或将其设置为背景图片来执行此操作。

这是CSS方法，但的缺点是宽高比基于图像宽度，在某些断点处，图像可能无法填充图块高度。

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

因此，使用背景图片可能会更好，但此方法并非完全跨浏览器支持。

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

Answer 3

已经过了一年，语法发生了巨大变化，但问题仍然存在。以下是我在Angular 5 / Angular Material 5项目中解决此问题的方法。

对于2列和4600px x 3400px的图片，我做了以下工作：

在我的CSS中：

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

在我的html模板中：

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

Answer 4

所有答案都很好。但是您也可以尝试

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