在 Angular Material 网格中缩放图像

Posted 2023-03-06

【中文标题】在 Angular Material 网格中缩放图像

【英文标题】：Scale images in Angular Material grid

【发布时间】：2016-07-17 04:09:27

【问题描述】：

我正在尝试将图像放置在我正在开发的基于 Angular-Material 的应用程序中的网格图块中。我的问题是这些图像不“适合”它们的图块。下面是一个例子。我的图像很大 (2832x4256) 并接管了整个容器，而不是缩放以适应其磁贴。如何使图像缩放以适应网格中各自的图块？

<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row->
  <md-grid-tile class="green">
    <img src="resources/images/food-beer.jpg" >
    <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>

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

【问题讨论】：

How do I stop md-cards from stretching images to full vertical height?的可能重复

【参考方案1】：

所有答案都很好。不过你也可以试试

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

【参考方案2】：

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

对于 4600 像素 x 3400 像素的 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>

【参考方案3】：

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

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

【讨论】：

简单的解决方案！ :)

但图片没有保持其纵横比

在 2019 年使用 fxFlexFill

【参考方案4】：

您可以通过在 CSS 中定位图像或将其设置为背景图像来做到这一点。

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

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

所以使用背景图片可能会更好一点但是这种方法并不完全支持跨浏览器。

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