angular2 directive 讓圖片垂直居中

這個作法最終的效果是橫向寬度100%，高度最高爲300px，當圖片的寬度大於高度時，圖片會垂直居中，若是圖片的寬度小於高度時，橫向100%，超過300px的部分將會被隱藏，效果以下：

作法是使用柵格佈局，每行顯示4個，頁面代碼以下：

<div class="row">
  <div class="col-md-3" *ngFor="let l of lists; let i = index">
    <div class="card">
      <div class="card-block">
        <div class="form-group cover" [style.background-color]="ranColor(i)">
            <img [src]="l.url" imgresize>
        </div>
        <div class="form-group">
          <label class="form-control-label">名字</label>
          <select class="form-control">
            <option>Jason Stanson</option>
            <option>黃立行</option>
            <option>高圓圓</option>
            <option>劉亦菲</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

ts代碼：

//這個是背景顏色的代碼，網上找的，顏色很柔和，看上去很舒服
colorList: any = ['#E3A05C','#b2be7e','#726f80','#390d31','#5a3d42','#14446a','#113f3d','#3c4f39','#5f5c33','#b3d66e','#fff5f6','#b2c8bb','#458994'];

//這個是在循環的過程當中添加背景色
ranColor(index?: number) {
  return this.colorList[index];
}

CSS代碼以下，內容不多：

img {
  width: 100%;
}

.cover {
  height: 300px;
  overflow: hidden;
}

重要的地方是使用angular2 的directive如何讓圖片居中，思路是使用屬性綁定，得到圖片的高度和寬度，進行計算，獲得一個margin-top的值，將這個值賦值給圖片對象，這裏綁定了margin-top屬性，監聽了窗口的load和window.resize事件：

import {Directive, ElementRef, HostBinding, HostListener} from "@angular/core";

@Directive({
  selector: '[imgresize]'
})

export class ImgResizeDirective {

  _dom: any;
  _margin_top: any;

  constructor(private elem: ElementRef) {
    this._dom = this.elem;
  }

  @HostBinding('style.marginTop.px') get width() {
    return this._margin_top ? this._margin_top : 0;
  }

  @HostListener('load')
  load() {
      let h = this._dom.nativeElement.offsetHeight;
      let w = this._dom.nativeElement.offsetWidth;
    if (300 > h) {
      this._margin_top = (300 - h)/2;
    }
    if (300 < h) {
      this._margin_top = 0;
    }
  }

  @HostListener('window:resize')
  resizeWindow() {
    let h = this._dom.nativeElement.offsetHeight;
    let w = this._dom.nativeElement.offsetWidth;
    if (300 > h) {
      this._margin_top = (300 - h)/2;
    }
    if (300 < h) {
      this._margin_top = 0;
    }
  }
}