Почему картинка не занимает всю высоту дива?

Question

[Наталия]

Добрый день!
Есть html:
<div class="test-images_content"></div>
и css:

.test-images_content {
    background: url(resources/images/bg_2.jpg) no-repeat;
    background-size: contain;
    position: relative;
    max-width: 100%;
    height: 680px;
    margin: 0 auto;
}

[сами параметры картинки: 3307px * 680px]

В высоту картинка занимает только часть дива test-images_content.
Пробовала задавать max-height: 100%; - не получается.

Дополнительно!
Для наглядной демонстрации взяла примерные образцы (картинки ниже).

нужно, чтобы картинка была резиновой, то есть при уменьшении экрана пропорционально уменьшалась тоже в рамках своего блока. Для десктопных размеров от нее нужна только часть (середина)- см скрин:


, а при уменьшении - она должна появляться полностью - см скрин.

Comments

[Ярослав Иванов]

jsfiddle

[Ярослав Иванов]

background-size: cover;

Answer 1

[Сергей Горячев]

background-size: cover;
При contain она вписывается по большей стороне вся в блок.

Comments

[Наталия]

Спасибо за ответ.
Написала дополнения в вопрос.

[Сергей Горячев]

Наталия: background-size: 100% auto;

[Наталия]

Sergey Goryachev: Не помогло.

[Сергей Горячев]

Наталия: Сделай fiddle, надоело ломать голову)

[Сергей Горячев]

Наталия: А, наоборот. background-size: auto 680px;