прямоугольное изображение реагирует в разных размерах экрана

Question

У меня есть изображение размером 1050x700. Я бы разместил его в полноэкранном режиме, когда он находится на рабочем столе. идея заключалась бы в том, чтобы поместить его, когда находится в настольной версии под черной полосой, таким образом изображение остается почти таким же. здесь это jsfiddle пример http://jsfiddle.net/qLdp4czn/1/

в мобильном нет никаких проблем, потому что оно уместилось на дисплей устройства поэтому он должен поддержать нормальный, не помещая его под бар

здесь код:

<div class="container-fluid top-bar"> 
    <div class="row-top"> 
     <div id="central-block" class="text-center"> 
      <p>Title</p> 
     </div> 
    </div> 
</div> 
<div class="img-background"> 
    <img src="http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg" alt="animal" class="img-responsive"> 
</div> 

Answer 1

Поместите изображение в качестве фона вместо изображения и удалить элемент IMG:

.img-background { 
background-image:url(http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg); 
background-repeat:no-repeat; 
background-size:100% auto; 
position:relative; 
width:100%; 
height:100%; 
} 

Вы, возможно, придется установить ширину и высоту элемента в зависимости от вашего другого CSS.