web-dev-qa-db-fra.com

Comment couvrir les images d'arrière-plan dans les grilles Bootstrap 3?

J'essaie de créer une page de renvoi à l'aide de Bootstrap 3. Je souhaite une image en haut dans une colonne de pleine largeur, avec trois images au-dessous, dans des colonnes et sans marges ni bordures, afin que les images soient jointes de manière transparente.

Je peux me rapprocher, mais lorsque je rétrécis le port de vue, un espace s'ouvre entre l'image du haut et celle du dessous.

Voici le URL : 

Voici mon code:

HTML:

<div class="container-fluid">
  <div class="row">      

    <div class="landing-col col-xs-12"></div>

  </div>

  <div class="row">

    <div class="first-col col-sm-4"></div>                      
    <div class="second-col col-sm-4"></div>           
    <div class="third-col col-sm-4"></div>

  </div>

</div>

CSS:

.landing-col {
   background: url('../images/99.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 500px; }

.first-col {
   background: url('../images/44.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 300px;
}

.second-col {
background: url('../images/33.jpg') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 height: 300px;
}

.third-col {
background: url('../images/22.jpg') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 height: 300px;
}

J'ai essayé d'utiliser min-width et max-width avec 100%, mais ils ne fonctionnent pas pour moi.

Vous pouvez éventuellement utiliser une requête multimédia pour obtenir la largeur exacte de la grille actuelle et définir la largeur de l'image à l'intérieur de celle-ci. Est-ce possible? 

csstwitter-bootstraptwitter-bootstrap-3
12
markhorrocks

Vous pouvez utiliser un élément de bloc avec une image d'arrière-plan où la hauteur est définie via padding-bottom avec une valeur en pourcentage

.img {
    margin-right: -15px; // Remove right gap
    margin-left: -15px;  // Remove left gap
    padding-bottom: 62.5%; // ratio is 16:10
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

Exemple dans Codepen

ou avec des éléments img (dans ce cas, vos images doivent avoir les mêmes dimensions)

Exemple dans Codepen

14
Rakhat Rakhmetov

Essayons ceux-ci:

  1. Emerge "rangées" en un.
  2. Ajouter col-md-* dans chaque colonne
  3. Diminuer la hauteur landing-col à 300 pixels

HTML

<div class="container-fluid">
    <div class="row">
        <div class="landing-col col-md-12 col-xs-12"></div>
        <div class="first-col col-md-4 col-sm-4"></div>
        <div class="second-col col-md-4 col-sm-4"></div>
        <div class="third-col col-md-4 col-sm-4"></div>
    </div>
</div>

CSS

.landing-col {
    background: url('http://sample.trainingdata.com.au/images/99.jpg') no-repeat;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 300px;
    margin:0;
    padding:0px;
}

Démo ici => http://fiddle.jshell.net/nobuts/7x0rpn5y/12/show/light/ .

6
Wilf

Vous pouvez toujours ajouter un espace réservé pour une image transparente à l'intérieur de la div pour contenir le conteneur, puis définir une hauteur automatique sur la div contenante 'col-xs-12'. Cela vous permettra toujours d'utiliser une image d'arrière-plan avec l'attribut cover qui remplira la zone sur des colonnes plus étroites.

2
Chris

Avez-vous vraiment besoin d'utiliser top image en tant qu'arrière-plan de la div? Essayez ce code à la place de votre <div class="landing-col col-xs-12"></div>:

<div class="landing-col col-xs-12">
    <img src="images/99.jpg">
</div>

Après cela, tout ce dont vous aurez besoin est:

.landing-col { padding: 0px; } // resets .col-xs-12 padding-right and padding-left

.landing-col img { width:100%; }
0
Kamil