Как сделать тег h1 реагирующим на фоновое изображение (вместе с фоном, теги h1 сжимаются и расширяются)

Question

У меня есть фоновое изображение в jumbotron, а также h1 тегов. Как изменить размер изображения, то h1 теги не размер, а также перекрываться с изображением на заднем плане

.jumbotron h1 { 
 
    font-size: 45px; 
 
} 
 
.jumbotron { 
 
    background-image: url("header.jpg"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    margin-bottom: 0px; 
 
    padding-top: 20px; 
 
    padding-left: 48px; 
 
    padding-right: 48px; 
 
}

<div class="container"> 
 
    <!-- Jumbotron Header --> 
 
    <div> 
 
    <header class="jumbotron"> 
 
     <h1> Hello, how May I help you.</h1> 
 
     <h1>Happy to help you<br> 
 
     <img src="prime.png" class="img-responsive" alt="flower"> 
 
\t </header> 
 
<div> 
 
</div>

Answer 1

У меня есть две демки на Codepen, которые исследуют концепцию масштабирования текста.

http://codepen.io/denmch/pen/MYZqXB

http://codepen.io/denmch/pen/EaGMYZ/

Вы можете проверить CSS и играть с концепцией по своему усмотрению, но основная идея заключается в том, чтобы вычислить размер шрифта с помощью комбинации обычных мер (эм, бэр, Рх ...) и vw (измерение ширины на основе видового экрана), которое будет создавать пропорциональный размер текста, который отвечает на окно просмотра. Вот пример:

h1 { 
    font-size: calc(1rem + 3.5vw); 
} 

Эта идея также была explored by Mike Riethmuller, который сделал много большую работу и даже, видимо, есть видео на эту тему.

Это считается экспериментальным, но вы должны быть хорошо везде, кроме Opera Mini.

Answer 2

Вам нужно будет использовать javascript для сокращения размера шрифта с помощью jumbotron.

Если вы в настоящее время изменения размера всего окна, чтобы уменьшить изображение, то вы можете просто добавить следующее:

window.addEventListener('resize', function() { 

    var h1 = document.getElementById("jumbo-h1"); //I made up an id for simplicity 
    var width = document.getElementsByClassName("jumbotron")[0].offsetWidth; 

    if (width > 600) { 
     h1.style['font-size'] = "45px"; 
    } else if (width > 400 && width <= 600) { 
     h1.style['font-size'] = "35px"; 
    } else { 
     h1.style['font-size'] = "25px"; 
    } 
} 

если вы используете JQuery, это становится гораздо чище:

$(window).on('resize',function(){ 
    var $h1 = $(".jumbotron h1");   //note that ID is not needed 
    var width = $(".jumbotron").width(); 
    if (width > 600) { 
     $h1.css({"font-size": "45px"}); 
    } else is (width > 400 && width <= 600) { 
     $h1.css({"font-size": "35px"}); 
    } else { 
     $h1.css({"font-size": "25px"}); 
    } 
}); 

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

Если изменение размера JumboTron другими способами, просто переместить код в обработчике я предоставил в свою собственную функцию и вызвать, что при необходимости (в то же время передать ссылку на обработчик окна изменения размера)