如何使图像适合其容器 - 动态执行

Question

需要 Html+CSS 专家的帮助： 我有一个角度材料设计mat-grid-list，它的每个mat-grid-tile 3元素中都应该包含-左侧的mat-radio-button，以及标题和下方的右侧文本-图像. 主要问题是 Base64 编码表示的图像及其尺寸（宽度和高度）彼此不同。 我想让每个图像完全位于其容器中，同时保持其宽度和高度之间的正确比例。 我可以使用图像加载事件对图像 css 属性进行一些操作。 问题是这样做的机制应该是什么，或者是否有其他想法\解决方案？ 看到一个答案后，这是我的想法的重点： 我想在需要时将完整图像适合容器，同时使其更小 - 我想检查可能是主要限制 - 宽度或高度 - 然后更改（宽度\高度）以适合容器，并且以相同的比例更改另一个维度（分别为高度\宽度）。 我不介意容器中有未使用的空间 - 我知道这是副作用之一。

查看我的代码：（ProfileImage 是 base64 编码）

HTML：

<div>
  <div class="container-fluid">
    <mat-grid-list [cols]="numberOfColumns" rowHeight="2:1">
      <mat-grid-tile *ngFor= "let item of items"> 
        <mat-radio-button value="item.ID">
        <div style="width: 100%; height: 90%;">
            <div style="height: 10%;">{{item.Name}}</div>
            <div style="height: 90%;" >
              <img [src]="item.ProfileImage" class="thumbnail" (load)="itemProfileHasLoaded($event, item.ID)">
            </div>
        </div>
        </mat-radio-button>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</div>

组件：

  itemProfileHasLoaded(event : any, itemID : number)
  {
    if (event && event.target)
    {
      //I can set here some logic to set their dimensions, but what should it be ? 
      event.target.width = 
      event.target.height = 
    }*/
  }

Answer 1

好的，问题来了：

“我希望每个图像都完全位于其容器中，同时保持其宽度和高度之间的正确比例。”

如果您曾尝试将方形积木放入圆孔中，您就会知道会发生什么。

您不能将不同的比率放入同一个容器中而不会失真。所以要么使图像适合容器并丢失比例，要么将其放在背景中并丢失图像的一部分。

我的建议：使用带有 background-size:cover 的背景图片；