Как сделать блок с изображением, который бы постоянно был в высоту на 100%?

Question

[aumk]

Здравствуйте, на это сайте trama.cz/combi-kolekce/combi/Arc мы видим слайдер. Фишка в том, что как бы мы его ни ресайзили в высоту или ширину, высота слайдера всегда занимает 100% по высоте и ширине, не больше, не меньше, а дальше другой контент. Но и это еще не все, заметили, что изображение при этом никак не обрезается, а отцентрируется и во всю длину и ширину встает. Как такое можно реализовать?

Answer 1

[Виталий Желтяков]

Вам нужно использовать:
background-size: cover;
Вообще, очень хорошо хоть иногда читать справочники, чтобы освежить память.

Comments

[aumk]

ты не в тему друк. Видимо ты и сам толком не знаешь как работает background cover

[Виталий Желтяков]

@aumk Да, точно. Там выравнивание происходит по левому краю и центру по вертикали.
Если посмотреть код, то там просто при изменении размеров пересчитывается margin-top блока с изображением в зависимости от height. Верхняя и нижняя выступающая часть закрываются другими блоками.

Answer 2

[Bogdan Odarchenko]

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

Сам див можно смешать вверх или вниз чтобы объект был по центру, при более мелких размерах, менять размер заднего фона.