J'essaie de faire une page d'atterrissage à l'aide de bootstrap 3. Je veux une image supérieure dans une colonne de largeur intégrale avec trois images en dessous de celui-ci dans les colonnes et sans marges ou bordures, de sorte que les images rejoignent de manière transparente.
Je peux Promenez-vous, mais quand je restreme le port de vision, un espace s'ouvre entre l'image supérieure d'une image en dessous de celle-ci. P>
Voici le URL : p>
Voici mon code: p>
HTML: P>
.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;
}
4 Réponses :
Avez-vous vraiment besoin d'utiliser l'image supérieure en tant qu'appount de la DIV? Essayez ce code au lieu de votre après que toutes les propriétés que vous allez besoin est:
Oui, je veux que l'image soit complètement affichée (couverture) dans la DIV à n'importe quelle taille de port de vue. Je me rends compte que je peux utiliser une requête moins multimédia pour modifier l'image à différentes tailles de port d'affichage, mais cela perd l'effet de couverture. :
1 commentaires
Vous pouvez toujours ajouter un espace réservé d'images transparent à l'intérieur de la DIV pour maintenir le conteneur, puis définissez une hauteur automatique sur la Div 'Col-XS-12'. Cela vous permettra toujours d'utiliser une image d'arrière-plan avec l'attribut de couverture qui remplira la zone des colonnes plus étroites.
J'obtiens le même résultat. Quelle que soit la taille de la taille de l'image transparente, la taille de l'image détermine la taille de la colonne.
Essayons-les:
col-MD - * dans chaque colonne
- Diminuez le
Landing-col Hauteur à 300PX
html xxx CSS xxx démo ici => http://fiddle.jshell.net/nobuts/7x0rpn5y/12/12/12 Afficher / Light / .
1. Ceci est une réponse Link uniquement 2. Il se casse sur le point d'arrêt Col-Sm- *
Qu'attendez-vous plus qu'une réponse?
Une explication. Cochez cette case MSE Post pour plus d'informations sur les réponses uniquement sur le lien.
@Carriekendall, merci pour une leçon précieuse.
URL renvoie 404
Vous pouvez utiliser l'élément de bloc avec l'image d'arrière-plan où la hauteur est définie via le bas du remplissage avec une valeur de pourcentage ou avec des éléments IMG (dans ce cas, vos images doivent avoir les mêmes dimensions)
Légère écart à 62,5%, ce qui a été passé à 39% sur un moniteur de 24 "à pleine taille. Merci.
Pouvez-vous mettre un bootply.com/new# ensemble pour montrer le problème? Les lignes et les colonnes ont un remplissage par défaut - simplement le supprimer.
Le problème n'est pas le rembourrage. C'est parti. Mon problème est que je dois montrer une largeur ou une hauteur d'image fixe pour que l'image soit affichée. Cela provoque des problèmes de hauteur à des tailles de port plus petites. Placer l'image dans HTML empêche l'image de redimensionnement de manière dynamique pour s'adapter à la colonne.
bootply.com/wux7mvvra5
Ce démarrage ne montre rien.
Je ne peux pas le comprendre encore, je n'ai jamais utilisé de basculement.
Prenez votre temps - vous avez placé HTML à l'intérieur de la boîte JavaScript. Observez également les boutons «Base CSS» et «Composants» qu'il vous fournit pour aider à générer votre page.
Ce n'est pas une question d'apprentissage de la construction d'une page, il suffit de comprendre comment couvrir une image dans une colonne et de le redimensionner de manière dynamique tout en maintenant aucune séparation entre rangées ou colonnes.
Je pense que vous êtes mal compris mon point. Vous devriez reproduire le problème dans le votillage afin que les utilisateurs puissent travailler dessus pour vous aider au lieu de deviner et de vérifier une solution. Quand j'ai dit d'aider à «générer» une page; Je voulais dire «reproduire» la page que vous avez. La seule différence est que ceci est un problème CSS - vous pouvez probablement simplement donner des images / données statiques dans le bas. Puis modifiez votre question pour lier ce démarrage, alors les gens vont travailler dessus. Dans l'ensemble, il s'agit simplement d'une suggestion, mais cela rendra votre question beaucoup plus claire et plus facile à travailler sur les utilisateurs de la pile.
Vous envisagez de mettre le contenu à l'intérieur des colonnes de la grille? Sinon, je suggérerais d'utiliser l'utilisation de![]()
s et supprimez le remplissage des colonnes.
Voici un exemple rapide: JSBIN.com/feqedu/1/edit?html, CSS, sortie