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

html css wordpress header underscores-wp

931 просмотра

1 ответ

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

Я создаю тему 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 } ?>

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

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

демонстрация

Автор: Balu Источник Размещён: 08.11.2019 11:30

Ответы (1)


0 плюса

Высота рассчитывается автоматически в соответствии с содержанием в 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 class="parent" style="width:500px;">
    <div class="child"> </div>       
</div>

Здесь внутренний div также занимает 500 пикселей.

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

.site-header {
    display: inline;
}

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

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

Автор: Abhirath Mahipal Размещён: 20.08.2016 03:52
Вопросы из категории :
32x32