[html|angular]根据图片大小自适应居中留白

今天修公司的bug,发现大佬一个有意思的写法，做做笔记

<div id="floorplan-preview-content" class="content">
        <div class="item" *ngFor="let item of cadItems;let i = index">
          <div class="layout-image" [class.selected]="isSelected(i)" (click)="select(i)">
            <img [src]="item.image" alt="" [ngStyle]="getSize(i)">
          </div>
          <div class="layout-name">
            <input type="text" [(ngModel)]="item.name">
          </div>
          <div class="layout-buttons">
            <button (click)="onSetCur(i)" class="layout-button" [class.selected]="isCur(i)">当前楼层</button>
            <button (click)="onShowPreview(i)" class="layout-button">预览</button>
          </div>
        </div>

      </div>

  public getSize(index: number) {//重要的是
    let contentElement = document.getElementById('floorplan-preview-content');
    let item = contentElement.children[index];
    let img = item.getElementsByTagName('img')[0];
    if (img.width / img.height > item.clientWidth / 160) {
      return { width: '100%' };
    }
    return { height: '100%' };
  }

  .layout-image {
      cursor: pointer;
      display: flex;
      border: 1px solid #bbb;

      &.selected {
        border: 2px solid #5DB1F6;
        color: #fff
      }

      &:hover {
        border-color: #5DB1F6;
      }

      height: 180px;
      width: 180px;

      img {
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }