Как увеличить высоту заголовка зависит от высоты фонового изображения?

Question

Попытка найти ответ довольно долго, но я даже не уверен, как выразить вопрос поисковому поиску - так что я попытаюсь объяснить здесь, и если вы знаете, что уже ответили, я буду рад за ссылку :)

Я создаю тему wordpress, используя рамку Underscores. Я хочу, чтобы мой заголовок зависел от высоты фонового изображения. Я имею в виду - я могу загрузить там изображение любого размера, а ширина заголовка будет составлять 100% изображения и высоты, которые будут динамически изменяться в зависимости от размера экрана.

Лучше для фантазии, вот пример: http://hitchdiary.cz/

Попробуйте изменить размер окна - это полностью отображается ВСЕГДА изображение и высота изменения заголовка.

Так вот что я хочу. У меня есть заголовок статического размера, а фоновое изображение настраивается в соответствии с размером экрана.

.site-header {    
    height: 100%; 
    width: auto; 
    background-color: #000; 
    background-size: 100%; 
} 

Изображение заголовка задано пользователем в разделе регулировки wordpress. В коде это так:

<?php if (get_header_image()){ ?> 
      <header id="masthead" class="site-header" style="background-image: url(<?php header_image(); ?>)" role="banner"> 
    <?php } else { ?> 
      <header id="masthead" class="site-header" role="banner"> 
    <?php } ?> 

Спасибо за любой совет. Извините, если это очевидно. Я довольно новичок.

ЧТО ПРОИСХОДИТ СЕЙЧАС:

demo

Answer 1

Высота рассчитывается автоматически в зависимости от содержания в DIV. Установив его на 100%, вы говорите ему, чтобы он взял высоту родительского контейнера.

Установка высоты в авто будет решать вашу проблему.

.site-header {    
    width: auto; 
    background-color: #000; 
    background-size: 100%; 
} 

or 

.site-header {    
    height: auto; 
    width: auto; 
    background-color: #000; 
    background-size: 100%; 
} 

Гибкая ширина

Жаль, что я перепутал быть гибкой шириной вместо высоты. Пожалуйста, не обращайте внимания на то, что ниже этого положения. Однако это может помочь вам в настройке ширины в будущем.

По умолчанию div, header, footer и т. Д. Являются элементами блока. Они занимают 100% родительского div.

Скажем, у вас есть

<div class="parent" style="width:500px;"> 
    <div class="child"> </div>  
</div> 

Здесь внутренний DIV занимает 500px, а также.

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

.site-header { 
    display: inline; 
} 

Вы даже можете попробовать плавать влево/вправо, если он не работает.

Вы можете прочитать больше о различиях между block and inline