it-swarm.com.de

Die Höhe des Bootstrap-Jumbotron wird erhöht, bleibt aber ansprechend

Ich habe mit Bootstraps Jumbotron rumgespielt, um ein Hintergrundbild zu platzieren. Extrem einfach zu machen:

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

und

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

Es sieht gut aus und ist ansprechend. Das Jumbotron ist jedoch nur so groß wie der Inhalt, von dem ich sehr wenig habe. Infolgedessen ist es viel dünner, als ich möchte, und ich möchte die Standardhöhe erhöhen, während das Ansprechverhalten erhalten bleibt. So etwas funktioniert beispielsweise nicht:

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

Es ist die richtige Höhe, aber das Bild reagiert nicht mehr. Ich habe mir die verschiedenen Mixins/Variablen angesehen, die mir zur Verfügung stehen, in der Hoffnung, dass etwas herausspringt, das ich nutzen könnte, aber ich habe kein Glück.

9
JasCav

Ich würde es mit Polsterung machen:

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

Durch die Verwendung von relativen Einheiten skaliert es.

Fiddle Demo

Verwenden Sie alternativ eine Mindesthöhe:

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

Fiddle Demo

Dadurch kann das Element bei Bedarf erweitert werden.

11
isherwood

Sie können dies erreichen, indem Sie im Jumbotron css relative padding-top und relative padding-bottom verwenden:

    .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>

2
Paul Jansen

Der folgende Code funktioniert für alle Bildschirme:

.jumbotron {
  background: url('backgroundimage.jpg') no-repeat center center fixed;
  padding-top: 20%;
  padding-bottom: 20%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

Die Cover-Eigenschaft ändert das Hintergrundbild so, dass es den gesamten Container abdeckt, auch wenn das Bild gedehnt werden muss oder ein Rand ein wenig abgeschnitten werden muss.

0
Dhanesh Agrawal

Wenn Sie eine feste Höhe verwalten, kann das Bild mit dem Container nicht wirklich gut funktionieren. Sie verzichten entweder auf das Seitenverhältnis oder die Bildgröße. Der beste Weg ist, einige Gemeinsamkeiten zwischen Ihrem Bildseitenverhältnis und der Größe des Containers zu finden. Dies ist noch schwieriger, wenn Sie background-image verwenden, da Sie sich bei allem auf den Container verlassen. 

Versuchen Sie also anstelle von cover etwas wie background-size: contain;. Spielen Sie herum, um zu bestimmen, wie das Bild skaliert und wie es gefällt. Normalerweise muss ich ein wenig rechnen, bevor ich ein gutes bg-Image implementieren kann. Wenn Ihr Bild 1200x600 ist, können Sie die Höhe entsprechend anpassen, da Sie jetzt wissen, dass das Verhältnis zwischen Breite und Höhe 2:1 ist. Hier kommt das responsive Design ins Spiel. Sie können Ihre .jumbotron-Höhe mithilfe von @media()-Abfragen ändern, um die wichtigsten Bildschirmgrößen wiederzugeben. An einem bestimmten Punkt werden Sie das Bild überfluten, aber zumindest wird es nicht viel sein, weil Sie festgestellt haben, dass der .jumbotron nicht zu weit vom 2:1-Verhältnis entfernt wird. background-size: cover ist es egal, wie das Bild skaliert wird. Dadurch wird erzwungen, den gesamten .jumbotron abzudecken, unabhängig vom Seitenverhältnis des Bildes. Sie können auch einen min-height anstelle einer festen Höhe implementieren, um sicherzustellen, dass der .jumbotron keine bestimmte Größe hat.

0
Bwaxxlo