css отзывчивая высота или соотношение для div

Question

Я хочу сделать отзывчивый заголовок. Коэффициент будет равен 6.1: 1 или что-то еще. Я знаю, как сделать гибкую ширину, но я не знаю, как поддерживать соотношение. Как я это сделаю?

<div id="master"> 
    <div id="header">This is header</div> 
</div> 

CSS

#master {width:90%;min-height:800px;margin:0 auto} 
#header {width:100%; height:150px;background-color:grey} 

Answer 1

Один из способов этого достичь, используя элемент :before псевдо установить высоту. Для этого требуется, чтобы весь контент находился в пределах position: absolute. Вот пример того, как вы могли это сделать. Отношение padding-top: 40%; - это соотношение, в основном 40% его собственных - это высота. Измените его, как хотите.

#master { 
 
    width:90%; 
 
    min-height:800px; 
 
    margin:0 auto; 
 
} 
 
#header { 
 
    width:100%; 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
#header::before { 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 40%; 
 
} 
 

 
#header .content { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    
 
    padding: 0 20px; 
 
}

<div id="master"> 
 
    <div id="header"> 
 
    <div class="content"> 
 
     This is header 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Почему бы вам не использовать запросы CSS медиа? css-media query in w3school

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

<style type="text/css"> 
@media(max-width: 767px) { 
    #master { 
    /* your css setting for smartphone*/ 
    } 
    #header { 
    /* your css setting for smartphone*/ 
    } 
} 
@media(min-width: 768px) { 
    #master { 
    /* your css setting for tablet(ipad)*/ 
    } 
    #header { 
    /* your css setting for tablet*/ 
    } 
} 
@media(min-width: 992px) { 
    #master { 
    /* your css setting for laptop*/ 
    } 
    #header { 
    /* your css setting for laptop*/ 
    } 
} 
</style> 

Вы можете установить свой собственный коэффициент по ширине устройства.