html - アスペクト比を変更する流体コンテナ内の流体イメージ

Question

こんにちは、ウェブサイトの画面の高さと幅に基づいた流動的なコンテナがあります。画面サイズに基づいて任意の方向に拡大するため、常に画像でコンテナを埋めたいと思います。使用される画像は、サイズと縦横比が異なります。

以下のhtmlとcssを試してみました。

div {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 80vh;
  width: 80%;
  background-color: red;
  position: relative;
  overflow: hidden;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  /*  max-width: 100%; // If used Image needs to be tall enough to fill div */
  /*  max-height: 100%; // If used Image needs to be wide enough to fill div */
}

<div>
  <img src="http://i.imgur.com/kOY2G57.jpg">
</div>

max-height と max-width がない場合、画像がコンテナーよりも小さい場合はうまく機能しますが、画像が自然なサイズで出てきてトリミングされるため、画像が大きくなる場合は機能しません。

jsfiddle の例

純粋なcssだけでこのタスクを達成することは可能ですか?

更新 また、背景画像を解決策として使用することを避け、可能であればimgタグのプログラミングを避けるために、domにimgタグを配置するだけでこれが可能かどうかを確認したいと思います.