L'augmentation de la Hauteur de Bootstrap Jumbotron mais Restant à l'écoute

J'ai été jouer avec Bootstrap est Jumbotron pour placer une image de fond. Extrêmement simple à faire:

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

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

Il ressemble beaucoup et est réactif. Cependant, le Jumbotron est seulement aussi grand que le contenu à l'intérieur de laquelle j'ai très peu. En conséquence, il est beaucoup plus mince que je le souhaiterais, et je voudrais augmenter sa hauteur par défaut , tout en conservant la réactivité. Ainsi, par exemple, quelque chose comme cela ne fonctionne pas:

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

C'est la bonne hauteur, mais l'image n'est plus sensible. J'ai été à la recherche dans les différents mixin/variables disponibles pour moi en espérant que quelque chose de pop que j'ai pu tirer parti, mais je ne suis pas du tout avoir de la chance.

Je ne suis pas sûr de la façon de réglage de hauteur le rend non-réactif. Pourriez-vous préciser?

OriginalL'auteur JasCav | 2015-03-17

11

Je le ferais avec un rembourrage:
```
.jumbotron {
    ...
    padding: 5em inherit;
}
```
En utilisant des unités relatives échelle.

Violon démo

Vous pouvez également utiliser une hauteur minimale:
```
.jumbotron {
    ...
    min-height: 300px;
}
```
Violon démo

Cela permet à l'élément d'étendre si nécessaire.

OriginalL'auteur isherwood
0

Lorsque vous administrez une hauteur fixe, l'image ne sera pas vraiment bien jouer avec le conteneur. Vous pouvez soit renoncer à rapport d'aspect ou de la taille de l'image. La meilleure façon est de trouver un terrain d'entente entre votre image ratio d'aspect et la taille du récipient. C'est encore plus délicat lors de l'utilisation de background-image parce que vous êtes en s'appuyant sur le récipient pour tout.

Ainsi, au lieu de la couverture, essayez quelque chose comme background-size: contain;. Jouer avec elle pour déterminer comment l'image des échelles et l'aime. J'ai l'habitude de devoir faire un peu de maths avant de mettre en œuvre un bon bg-image. Donc, si votre image est 1200x600, vous pouvez faire le réglage en hauteur en conséquence car vous savez maintenant que le ratio entre votre largeur et la hauteur est 2:1. C'est ici que le responsive design. Vous pouvez modifier votre .jumbotron hauteur à l'aide d' @media() requêtes afin de refléter les grandes tailles d'écran. À un certain point, vous aurez débordement de l'image, mais au moins il ne sera pas beaucoup plus parce que vous avez établi que le .jumbotron ne pas aller trop loin de la 2:1 ratio. background-size: cover ne se soucie pas de la façon dont l'image échelles. Il l'oblige à couvrir l'ensemble de la .jumbotron quel que soit le format de l'image. Vous pouvez également mettre en œuvre certaines min-height au lieu de hauteur fixe pour assurer la .jumbotron n'est pas forcé d'être d'une certaine taille.

OriginalL'auteur Bwaxxlo

Le code ci-dessous fonctionne pour tous les écrans :

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

Le couvercle de la propriété redimensionner l'image d'arrière-plan pour couvrir l'ensemble du conteneur, même si elle a pour étirer l'image ou à la coupe un peu l'un des bords.

OriginalL'auteur Dhanesh Agrawal

Vous devez vous connecter pour publier un commentaire.