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

Question

[Сергей Васенин]

Создал ранее тему Геометрическая сложная фигура на css фигура. как создать? решил сделать шапку таким образом. Поделить шапку на 2 части одна часть просто белый фон вторая будет картинкой той фигуры которая в прошлой теме...как это реализовать что бы в мобильниках отображалось корректно.Сначала сделал header 100% прописал в ней второй блок задал ширину в 50% и сделал картинку фоновой но она не отоброзилась почему то только если прописать высоту то всё ок но при уменьшении браузера всё ломаться

Comments

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

И мы сейчас должны угадать, что у тебя не получается? Где код? Где пример?

[Сергей Васенин]

Сергей Горячев, извиняюсь за тупое описание

[Сергей Васенин]

Сергей Горячев, подкорректировал

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

Сергей Васенин, не особенно легче стало, jsfiddle.net в помощь.

[Александр]

Без высоты картинка не будет отображаться, получается у вас блок высотой 0px. Ставьте высоту, а чтобы картинка поместилась вот это напишите:
background-size:contain;
А чтобы изменять высоту блока при изменении размеров окна - погуглите media-queries.

Answer 1

[Евгений Калибров]

Обычно адаптацию для картинок делают так:

.img {
width: 100%;
height: auto;
max-width:  300px; /* сюда прописываете ширину больше которой картинка не должна растягиваться */
}

Comments

[Сергей Васенин]

не работает просто не открывает картинку

[Евгений Калибров]

скиньте ссылку на пример

[Евгений Калибров]

Сергей Васенин Вам помог мой ответ? Хорошей благодарностью будет, если вы отметите его решением на данный вопрос.

[Сергей Васенин]

Евгений Калибров, извиняюсь просто проект забросил)

Answer 2

[4mobile]

очень пространный вопрос, не понятно в чем проблема

.logo-img {
width: 500px;
max-width: 100%;
height: auto;
}

Comments

[Сергей Васенин]

проблема в том что когда задаёшь картинке ширину она просто не открывается в шапке

[4mobile]

покажите сайт или кусок кода

[Сергей Васенин]

4mobile,

*{
margin: 0;
padding: 0;
}

header
{
width: 100%;
height: 100px;
background-color: red;
position: relative;
}

.head
{
background-image:url(left_bg.jpg);
width: 50px;
height: auto;
width: 550px;
height: 550px;
position: absolute;
top: 0;
right: 0;
}

[4mobile]

как-то так

<header>
        <div class="head"></div>
</header>

.head
{
    background: url(left_bg.jpg) center no-repeat;
    background-size: contain;
    width: 360px;
    max-width: 100%;
    top: 0;
    right: 0;
    height: inherit;
    position: absolute;
}

[Сергей Васенин]

4mobile, пустота в браузере

[4mobile]

Сергей Васенин, https://jsfiddle.net/4mobile/om6Lw4Lk/

Answer 3

[Ankhena]

https://jsfiddle.net/f4kk2p6e/ это чтоль надо? Или как оно должно себя вести при масштабировании?

Comments

[Сергей Васенин]

примерно так но элемент шапки должен быть где то 50% ширины размера окна любого устройства через которое будут заходить

[Ankhena]

Сергей Васенин, я сейчас разозлюсь
Что мешает в условиях вопроса это сразу написать? А также все остальные нюансы, которых мы не знаем.

Даже изображение выкладываете с белыми полями, а не обрезанное

Сделала квадратное, можно и нижнюю белую полосу отрезать, но тогда пересчитайте проценты в 3 варианте.

3 варианта, поскольку про высоту шапки опять приходится гадать на звездах: https://jsfiddle.net/g4k02Lbm/
Для первого из них читайте про background-size и устанавливайте нужное.