Высота заголовка, чтобы соответствовать фоновому изображению

Question

У меня есть вопрос, связанный с высотой заголовка.

HTML:

<header> 
     <h1> 
      Hello World! 
     </h1> 
</header> 

CSS:

header { 
    background-image: url("../images/header.png"); 
    background-size: cover; 
    height: 100%; 
    text-align: center; 
    color: white; 
} 

В этом случае высота заголовка соответствует высота текста. Есть ли способ установить высоту заголовка так же, как высота изображения?

Answer 1

Вы можете сделать изображение заголовка в качестве переднего плана IMG тега, а не фоновое изображение, а затем сделать это в CSS

header { 
    position: relative; 
} 

header img { 
    width: 100%; 
    height: auto; 
} 

header h1 { 
    position: absolute; 
    top: 0; 
} 

Answer 2

В CSS заголовке, вы можете поставить:

background: url("../images/header.png") 50% 50%/100% no-repeat fixed; 

Это будет автоматически размещать и изменять размер изображения, чтобы он не растягивался.

Answer 3

Почему вы не используете Flexbox? В наши дни это стандарт defacto.

Вот jsfiddle, что я имею в виду: JSFiddle example

По сути, то, что вы хотите сделать, это ваш <h> элемент должен быть на самом деле ребенок другого DIV в ваш <header>:

<header> 
    <div class="backimage"> 
     <h1> 
      Hello World! 
     </h1> 
    </div> 
</header> 

Ваш <header> div, как гибкий «контейнер», отображает дочерние элементы в виде столбца, без обертки, выровнен по центру с пространством вокруг и с выравниванием по центру:

header { 
    display: flex; 
    flex-flow: column nowrap; 
    justify-content: space-around; 
    align-items: center; 
    align-content: space-around; 
} 

Детальные элементы в контейнере Flex должны быть заказаны для номера внешнего вида либо в виде строки или столбца, в этом случае «контейнер» отображает элементы в макете столбца, поэтому вы хотите, чтобы ваш заголовок отображался как первый пункт. flex - сокращенно обозначение flex-grow, flex-shrink и flex-basis; этот третий является тем, какой размер должен быть элемент, первые два, контролирующие, какой приоритет или часть элемента контейнера этот дочерний элемент будет рассматриваться по сравнению с другими дочерними элементами. В этом случае обработайте его автоматически. Мы хотим переместить заголовок, который будет вертикально центрирован в содержащем div, поэтому position: relative;, добавьте 50% высоты контейнера к исходной точке начала элемента (который всегда начинается с левого верхнего угла объекта), и поскольку текст по умолчанию установлен на 1em, логически следует, что .5em будет центром, поэтому вычитаем из 50%. Дайте центру выравнивания текста для горизонтального центрирования:

header h1 { 
     position: relative; 
     top: 50%; 
     margin-top: -.5em; 
     text-align: center; 
     order: 1; 
     flex: 1 0 auto; 
    } 

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

.backimage { 
    background-image: url('http://upload.wikimedia.org/wikipedia/ \ 
    commons/4/47/PNG_transparency_demonstration_1.png'); 
    background-repeat: no-repeat; 
    border: 1px solid blue; 
    width: 500px; 
    height: 300px; 
    order:2; 
} 

Вот что вы в конечном итоге с:

Здесь большое руководство по использованию Flexbox: Flexbox guide