Изображение заголовка отзывчивое центрированное

Question

Я пытаюсь закодировать заголовок изображения, аналогичного изображению на этой странице: http://www.eltrecetv.com.ar/nosotros-a-la-manana. Обратите внимание на то, что происходит с изображением парня, когда выизменить размер страницы. Он остается в одном и том же месте, он всегда центрирован, и он не обрезается (немного внизу, но не так сильно). Here's мой скромный и лаконичный код: (и here'sa скрипку тоже: 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;   
} 

Проблема, которую я нашел, когда я изменить размер в окне браузера div сжимается до той точки, где он только видится лицом человека, так же как и то, что происходит на исходной странице, где вы всегда можете видеть плечи. Я не знаю, правильно ли объясню это, но в основном при изменении размера окна высота div изменяется намного быстрее, чем то, что она делает на исходной странице, и это влияет на остальную часть страницы, чтобы заставить изображение человека всегда остаются в одном месте и всегда должны иметь одинаковое соотношение сторон. У меня проблема с соотношением сторон, но у меня возникают проблемы с высотой сжатия div и слишком большим увеличением размера окна.

Оригинальная страница была сделана используя Drupal 7, я думаю. Но то, что я хочу, это фрагмент css, который делает именно это. Я знаю, что это возможно, я пробовал каждый час, но я что-то пропустил. Я знаю, что исходная страница использует много изображений с разными разрешениями, но это не проблема.

Надеюсь, кто-то может помочь. Я с нетерпением жду ваших комментариев.

Заранее благодарен!

Answer 1

Смотрите обновленный скрипку: https://jsfiddle.net/wvep5ga1/3/

просто добавить

background-size: 100%; 
background-repeat: no-repeat; 

Как это:

.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;   
}