Как правильно сделать адаптивной шапку?

Question

[De Slow]

cs-16.net
сайт на нем в шапке изображение, как его правильно адаптировть?

Comments

[Ankhena]

background-size совместно с background-position и, возможно, media условиями

[De Slow]

Ankhena, то есть без задания высоты не будет работать?(

[Ankhena]

De Slow,
Можно сохранять пропорции у блока https://jsfiddle.net/Ankhena/cLhxv7eq/
Можно задавать минимальную/максимальную высоту.
Можно не задавать высоту вообще.
Все зависит от желаемого поведения.

[De Slow]

Ankhena, пропорции как раз подходит. Постараюсь сейчас разобраться
Что значит установка пропорций?
В данном случае wrap-это header?

[Ankhena]

De Slow, да .site-header

[De Slow]

Ankhena, content - содержимое контейнера?
как прописать ума не приложу....

[Ankhena]

De Slow, да, блок .content это содержимое блока.

Answer 1

[VegasChickiChicki]

Добавить хедеру
background-position: center center;
Я бы попробовал так

Comments

[De Slow]

нужно что бы картинка уменьшалась а не обрезалась(

Answer 2

[Kozlov]

backgroud-position: center;

Comments

[De Slow]

нужно что бы картинка уменьшалась а не обрезалась(
то есть что бы была полностью видна

[Kozlov]

De Slow, background-size:cover;

[Kozlov]

А зачем строгая высота у шапки?

.site-header {
    min-height: 435px;
}

Я бы сделал так

Элементу с фоном {
    background-image: url(/templates/Default2/_include/img/header_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
.site-header {
    min-height: 110px;
}

[De Slow]

Gusto, но тогда в полной версии шапка всего 110 px а нужно что бы была полная.. такс height 100% Не решает пробелмы
отдельно в responsive прописывать для устройств высоту?

[Kozlov]

De Slow, тогда медиа-запросами под каждое разрешение подгоняй высоту шапки.

Answer 3

[Maxim Noverin]

background-position-y: top;
background-position-x: center;

Comments

[De Slow]

нужно что бы картинка уменьшалась а не обрезалась(
то есть что бы была полностью видна на всех разрешениях....

Answer 4

[Артем Пономарев]

Помести логотип в блок, блоку с помощью media запросов задавай свойства. а img - max-width: 100%

Comments

[De Slow]

Так дело не в логотипе, а в шапке именно картинке которая вверху занимает весь экран в ширину

[Артем Пономарев]

De Slow, Так и что в итоге вы хотите? Вам нарисовать дизайн шапки на разных устройствах?

[Kir]

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

[Артем Пономарев]

Kir, аа, так вы про background шапки, а я то думал про логотип)
Но как я вижу вы уже все сделали?)