Header image responsive centered - html

Question

I´m trying to code a header image similar to the one on this page: http://www.eltrecetv.com.ar/nosotros-a-la-manana. Pay attention to what happens to the image of the guy when you resize the page. It stays in the same place, it´s always centered and it doesn´t crop (a little at the bottom but not that much anyway). Here´s my humble and succinct code: (and here´s a fiddle too: https://jsfiddle.net/wvep5ga1/ )
html:
<div class="outer">
</div>
css:
.outer{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size:cover;
background-origin:padding-box;
background-position:top center;
min-height:386px;
}
The problem I find is when I resize the browser window the div compresses to the point where it´s only visible the face of the man, as oppposed to what happens in the original page where you can always see the shoulders. I don´t know if i´m explaining this correctly, but basically on window resizing the height of the div varies much faster than what it does on the original page and that affects the rest of the page, beacuse the image of the man must always stay in the same place and must always have the same aspect ratio. I have the aspect ratio issue solved, but i´m having problems with the height of the div compressing and expanding too much on windows resize.
The original page was done using Drupal 7, I think. But what i want is a css snippet that does just that. I know it´s possible, i´ve tried everyhting for hours but i missing something. I know the original page uses many images with different resolutions but that´st no the issue.
Hope somebody can help. I look forward for your comments.
Thanks in advance!

Answer 1

See updated fiddle: https://jsfiddle.net/wvep5ga1/3/
just add
background-size: 100%;
background-repeat: no-repeat;
Like this:
.abc{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-origin: padding-box;
background-position:top center;
min-height:386px;
}