JSFiddle - React, Tailwind, and code Playground

Como reduzir a largura de uma imagem e manter a proporção com CSS? SOPT question

HTML

<div class="container">
    <img src='http://upload.wikimedia.org/wikipedia/commons/7/75/Zacharias_Wagner_-_Mameluca.jpg' width='500px' height='500px'/>
</div>

CSS

.container .fakeImg {
    background: no-repeat center;
    background-size: cover;    
}

.container
{
  width: 200px;
    display:inline-block;
    border:2px solid red;
    margin: 4px;
}

JavaScript

$('.container img').replaceWith(function(i, v){
    return $('<div/>', {
        style: 'background-image: url(' + this.src + ');' + 
        'width:' + this.width + 'px;' + 
        'height:' + this.height + 'px;' ,
        class: 'fakeImg'
    })
})