Imagem ajustada a 100% de largura ou altura em relação à "div parent"

Como fazer para ajustar uma imagem a 100% de largura ou altura automaticamente independentemente da sua proporção (aspect ratio)?

Em tempos respondi a uma pergunta sobre este assunto na comunidade Stack Overflow, no entanto parece ter sido uma resposta tardia que ficou por águas, mas com um ponto forte que ninguém apontou que foi o como fazer isso utilizando a tag `<img>` em vez de utilizarmos a imagem como `background-image` que todos sabemos como fazer isso. Quer dizer, pelo menos qualquer pessoa com 1 ano de desenvolvimento ou que tenha aprofundado o conceito da `background-image` um pouco melhor.

Utilizando a tag `<img>`, podes fazer isso não especificando uma altura ou largura para a imagem, mas sim definindo os seguintes valores:

```
max-width:100%;
max-height:100%;
```

E em seguida para centralizar a imagem ao centro:
```
display: flex;
align-items: center;
justify-content: center;
```

Existem outras formas de centralizar elementos ao centro, mas foi este o método que utilizei aqui.

 Aqui está um exemplo no jsFiddle: ► http://jsfiddle.net/2m56au4g/

Versão com `background-image`

Alternativamente tens aqui também a versão com `background-image` que pode vir a ser uma melhor solução dependendo de cada caso e situação de manipulação do DOM.

CSS:
```
.container {
    width:200px;
    height:200px;
    display:inline-block;
    background-size:contain;      /* faz a imagem ficar contida dentro do elemento */
    background-repeat:no-repeat;  /* faz a imagem não ser repetida */
    background-position: center;  /* centra a imagem independentemente do tamanho ou largura do elemento */
    background-color: #C8ECFF;
    border:2px solid #717171;
}
```

E o HTML:
```
<div class="container" style="background-image:url(http://i.stack.imgur.com/CMoaX.jpg)"></div>
<div class="container" style="background-image:url(http://i.stack.imgur.com/lIkte.jpg)"></div>
```

Exemplo no jsFiddle: ► https://jsfiddle.net/6150euyn/