在Angular Material网格中缩放图像

Question

我正在尝试将图像放在我正在研究的基于Angular-Material的应用程序的网格图块中。我的问题是这些图像无法“适合”其图块。下面是一个例子。我的图片很大（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

如果您希望它们占据整个矩形，我相信使用“ layout-fill”属性也可以实现。

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

Answer 2

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

对于 4600px x 3400px 的 2 列和图片，我执行了以下操作：

在我的 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 3

您可以通过在 CSS 中定位图像或将其设置为背景图像来实现此目的。

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

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

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

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