web-dev-qa-db-fra.com

Augmenter la hauteur de Jumbotron Bootstrap mais rester sensible

J'ai joué avec Jumbotron de Bootstrap 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;
}

et

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

Il a l'air bien et est réactif. Cependant, le Jumbotron n’a que la taille de son contenu - dont j’ai très peu. En conséquence, il est beaucoup plus fin que ce que je voudrais et je voudrais augmenter sa hauteur par défaut tout en maintenant la réactivité. Donc, par exemple, quelque chose comme ça ne marche 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 examiné les différentes variables/variables disponibles pour moi, dans l'espoir que quelque chose apparaisse que je pourrais utiliser, mais je n'ai pas de chance.

htmlcsstwitter-bootstrapresponsive-design
9
JasCav

Je le ferais avec un rembourrage:

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

En utilisant des unités relatives, il est mis à l'échelle.

Fiddle démo

Sinon, utilisez une hauteur minimale:

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

Fiddle démo

Cela permet à l'élément de se développer si nécessaire.

11
isherwood

Vous pouvez y parvenir en utilisant les valeurs relatives padding-top et relative padding-bottom dans le fichier jumbotron css:

    .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

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

La propriété cover redimensionnera l’image d’arrière-plan afin de couvrir l’ensemble du conteneur, même si elle doit étirer l’image ou couper un peu l’un des bords.

0
Dhanesh Agrawal

Lorsque vous administrez une hauteur fixe, l'image ne fonctionnera pas bien avec le conteneur. Vous renoncez au rapport hauteur/largeur ou à la taille de l'image. Le meilleur moyen est de trouver un terrain d’entente entre le format de votre image et la taille du conteneur. Ceci est encore plus compliqué lorsque vous utilisez background-image car vous utilisez le conteneur pour tout. 

Donc, au lieu de la couverture, essayez quelque chose comme background-size: contain;. Jouez avec elle pour déterminer la manière dont l’image évolue et ce que vous aimez. Je dois généralement faire quelques calculs avant de mettre en place une bonne image bg. Ainsi, si votre image est 1200x600, vous pouvez ajuster la hauteur en conséquence, car vous savez maintenant que le rapport entre votre largeur et votre hauteur est 2:1. Voici où intervient le design responsive. Vous pouvez modifier votre hauteur .jumbotron en utilisant des requêtes @media() pour refléter les tailles d'écran principales. À un moment donné, vous déborderez l'image, mais au moins ce ne sera pas beaucoup, car vous avez établi que le .jumbotron ne va pas trop loin du rapport 2:1. background-size: cover ne se soucie pas de la façon dont l'image est mise à l'échelle. Cela l'oblige à couvrir l'intégralité du .jumbotron quel que soit le rapport de format de l'image. Vous pouvez également implémenter un min-height au lieu d'une hauteur fixe pour vous assurer que le .jumbotron n'est pas obligé d'avoir une certaine taille.

0
Bwaxxlo