[解決済み] CSS 画像サイズ、どのように埋めるために、しかし、ストレッチしない？

質問

画像を持っていて、特定の幅と高さ（ピクセル）を設定したい。

しかし、CSSで幅と高さを設定した場合( width:150px; height:100px のように、画像が引き伸ばされてしまい、見栄えが悪くなってしまいます。

どのように <強い 塗りつぶし の画像をCSSで特定のサイズに変換し 引き伸ばさない ということですか？

塗りつぶして画像を引き伸ばした例。

元の画像

引き伸ばし画像。

塗りつぶし画像。

上記のFilled imageの例では、まず画像が150x255にリサイズされ（縦横比を維持）、それから トリミング を150x100に変更しました。

解決方法は？

cssプロパティを使用することができます。 object-fit . ("置換された要素の内容をどのように設定するか、例えば <img> または <video> は、そのコンテナに合わせてサイズを変更する必要があります(")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

サンプルはこちら

IE用のポリフィルがある。 https://github.com/anselmh/object-fit

関連する object-position (要素のボックス内のコンテンツの配置を指定します。）