Aumentare l'altezza di Bootstrap Jumbotron ma rimanendo reattivo

Question

Ho giocato con Bootstrap's Jumbotron per posizionare un'immagine di sfondo. Estremamente semplice da fare:

.jumbotron 
{ 
    background: url('path/to/images/banner.jpg') no-repeat center center; 
    background-size: cover; 
} 

e

<div class="jumbotron"> 
    <div class="container">...</div> 
</div> 

Sembra grande ed è reattivo. Tuttavia, il Jumbotron è grande solo quanto il contenuto al suo interno - di cui ho molto poco. Di conseguenza, è molto più sottile di quanto vorrei e vorrei aumentare la sua altezza predefinita mantenendo comunque la reattività. Così, per esempio, qualcosa come questo non funziona:

<div class="jumbotron"> 
    <div class="container" style="height: 600px;">...</div> 
</div> 

E 'la giusta altezza, ma l'immagine non è più reattivo. Ho esaminato le varie variabili/variabili a mia disposizione sperando che emergesse qualcosa che potevo sfruttare, ma non sto avendo fortuna.

Answer 1

lo farei con imbottitura:

.jumbotron { 
    ... 
    padding: 5em inherit; 
} 

Utilizzando unità relative esso bilancia.

Fiddle demo

alternativa, utilizzare un'altezza minima:

.jumbotron { 
    ... 
    min-height: 300px; 
} 

Fiddle demo

Ciò permette all'elemento di espandersi se necessario.

Answer 2

Quando si regola un'altezza fissa, l'immagine non si adatta bene al contenitore. Si rinuncia a proporzioni o dimensioni dell'immagine. Il modo migliore è trovare un punto in comune tra le proporzioni dell'immagine e le dimensioni del contenitore. Questo è ancora più complicato quando si utilizza background-image perché si sta facendo affidamento sul contenitore per tutto.

Quindi, invece di coprire, provare qualcosa come background-size: contain;. Giocaci con esso per determinare come l'immagine scala e simili. Di solito devo fare un po 'di matematica prima di implementare una buona immagine bg. Pertanto, se l'immagine è 1200x600, puoi regolare l'altezza di conseguenza perché ora sai che il rapporto tra larghezza e altezza è 2:1. È qui che entra in gioco il design reattivo. Puoi modificare l'altezza dello .jumbotron utilizzando le query @media() per riflettere le principali dimensioni dello schermo. A un certo punto, l'immagine verrà sovradimensionata, ma almeno non sarà di molto perché hai stabilito che lo .jumbotron non si sposterà troppo lontano dal rapporto 2:1. background-size: cover non interessa come l'immagine si ridimensiona. Lo costringe a coprire l'intero .jumbotron indipendentemente dalle proporzioni dell'immagine. È inoltre possibile implementare alcune min-height anziché un'altezza fissa per garantire che .jumbotron non sia forzato ad avere una certa dimensione.

Answer 3

È possibile raggiungere questo obiettivo utilizzando relativa padding-top e relativa padding-bottom nel css jumbotron:

.jumbotron { 
 
     background: url('http://placekitten.com/800/500') no-repeat center center; 
 
     background-size: cover; 
 
     padding-top: 20%; 
 
     padding-bottom: 20%; 
 
    }

<div class="jumbotron"> 
 
    <div class="container"> 
 
    <h1>Your Text Here!</h1> 
 
    </div> 
 
</div>