Как сделать так что бы изображение всегда поместилось на экране, без скролинга?

Question

[GandalfWhiteGO]

Не могу найти идеальный вариант.

Как сделать так что бы Header и Footer всегда занимали свое место навверху и ввнизу экрана.
А Content с изображением пропроционально менял свои рзмеры в зависимости от экрана без появления Scrollа.

То есть что бы Content всегда занимал свое место без выталкивания Footera в вниз экрана (тем самым добавляя вертикальный Scroll)

Answer 1

[RAX7]

.content {
    position: relative;
}

img {
    position: absolute;
}

Comments

[GandalfWhiteGO]

Да Вы Гений)

Я уже начал подумать указать фиксированную высоту..

Спасибо за ответ.

Answer 2

[Антон Антон]

https://jsfiddle.net/xgnm5a62/

Answer 3

[ForSureN1]

добавь для header и footer position: fixed

Comments

[GandalfWhiteGO]

Нет они и так фиксированы что то похожее на Sitcky Footer.

Проблема в изображений, как контролировать его что бы занимал всю отведенное ему место между Header и Footer.

И не вылезал за границы тем самым отталкивая Footer.