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

Je suis en train de faire une page d'atterrissage avec Bootstrap 3. Je veux une image plus complète de la largeur de la colonne avec les trois images ci-dessous il dans les colonnes de partout et pas de marges ou de frontières, de sorte que les images se joint parfaitement.

Je peux approcher mais quand je étroite, le port de la vue d'un espace s'ouvre entre le haut de l'image un les ci-dessous.

Ici est la 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 le min-width et max-width à 100%, mais ils ne fonctionnent pas pour moi.

Une possibilité pourrait être d'utiliser une requête de média pour obtenir la largeur exacte de la grille en cours et de définir la largeur de l'image à l'intérieur de cette largeur. Est-ce possible?

pouvez-vous mettre un bootply.com/new# ensemble pour montrer le problème? les lignes et les colonnes par défaut padding - il suffit de retirer.
Le problème n'est pas le rembourrage. Qui s'est passé. Mon problème est que je dois montrer une image fixe de la largeur ou de la hauteur pour obtenir l'image pour l'afficher. Cela provoque la hauteur des problèmes de plus petite vue port tailles. Placer l'image dans le html permet d'empêcher les images de façon dynamique le redimensionnement pour s'adapter à la colonne.
bootply.com/wux7mVvRA5
Je ne peux pas le comprendre encore, jamais utilisé bootply.
envisagez-vous de placer le contenu à l'intérieur des colonnes dans la grille? Si non, je te suggère d'utiliser des <img>s et retirer le rembourrage de l'colonnes.

OriginalL'auteur markhorrocks | 2014-08-17

14

Vous pouvez utiliser l'élément de bloc avec une image d'arrière-plan où la hauteur est définie par l'intermédiaire padding-bottom avec un pourcentage de la valeur
```
.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 les éléments img (dans ce cas, vos images doivent avoir les mêmes dimensions)

Exemple dans Codepen

Le léger décalage à 62,5%, ce qui s'est passé à 39% sur un 24" moniteur en plein écran. Merci.

OriginalL'auteur Rakhat Jabagin

Essayez ces:

Sortent des "lignes" dans un.
Ajouter col-md-* dans chaque colonne
Diminution de la landing-col hauteur de 300px

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

1. c'est un lien unique réponse 2. Il se casse le col-sm-* point d'arrêt encore
Qu'attendez-vous de plus qu'une réponse?
Une explication. Cochez cette MSE Post pour plus d'informations sur le lien-seulement des réponses.
Grande édition, ce n'est plus un lien seule réponse 🙂
Je vous remercie de votre précieuse leçon.

OriginalL'auteur Wilf

2

Vous pouvez toujours ajouter une image transparente de l'espace réservé à l'intérieur de la div pour tenir le contenant, puis définissez un automatique de la hauteur de la div contenant 'col-xs-12'. Cela va vous permettre d'utiliser une image d'arrière-plan avec la couverture de l'attribut qui va remplir la zone plus étroite colonnes.

J'obtiens le même résultat. Quelle que soit la taille de l'image transparente je fais la taille de l'image détermine la taille de la colonne.

OriginalL'auteur Chris
0

Avez-vous vraiment besoin d'utiliser une image comme 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 que toutes les propriétés que vous aurez besoin de:
```
.landing-col { padding: 0px; } //resets .col-xs-12 padding-right and padding-left

.landing-col img { width:100%; }
```
Oui, je veux que l'image soit entièrement illustré (couverture) dans la div à tout point de vue le port de la taille. Je me rends compte que je peux utiliser un Moins requête de média pour changer l'image à différents port de tailles, mais cela perd de la couverture de l'effet.

OriginalL'auteur Kamil

Vous devez vous connecter pour publier un commentaire.