Comment faire une grille souple de photos en utilisant Twitter Bootstrap si les hauteurs sont différentes
Comment puis-je Twitter Bootstrap 3 "img-responsive" des images, mais de leur permettre de disposer d'une série de hauteur, alors qu'une grille de photos de débit (à la différence de l'image ci-dessous)?
J'ai essayé de réglage de la hauteur de l'image de l'attribut, et max-height attribut, mais il semble ignorer ceux à moins que je l'ai mis de la hauteur avec"!important", mais ensuite, ils ont l'air mauvais et pas vraiment dans une grille car ils prennent peu d'espace horizontal.
J'ai essayé quelques astuces liés à la mise images d'arrière-plan de divs, et overflow:hidden
, mais tout ce que j'ai essayé 1) ne fonctionne pas, et 2) semble hacky 3) semble foiré. (essayé d'aller dans cette une, comme un exemple)
Les images sont un peu plus grand que la zone qu'ils remplissent, que je veux qu'ils soient en mesure de montrer en plus sur les grands écrans, de sorte que même si j'arrivais à obtenir l'image d'arrière-chose à travailler, il serait montrant un zoom avant dans la version de l'image, depuis l'arrière-plan ne sait pas à l'échelle vers le bas pour s'adapter.
Cela semble comme il EST à un événement commun est - il quelque chose de simple façon de le gérer?
C'est intéressant, qui va donner un coup de feu. Mais qui permet de variation de hauteur des images - n'est-il pas un moyen de le faire pour le rendre réellement une grille?
Habituellement, ce serait fait par la culture de toutes les images à un taux défini.
évidemment, je pourrait recadrer les images, mais je ne pense pas que c'est la seule approche, et je préfère pas si je n'ai pas.
il ya de grands avantages pour que – j'ai posté une réponse et accueillir des critiques ou des questions que vous avez.
OriginalL'auteur Dave | 2014-02-01
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas familier avec bootstrap, mais je suis sûr que vous pourriez envelopper chaque
img
dans undiv.wrapper
, et d'appliquer quelque chose de ce genre pour les divs:Puis à manipuler l'image mise à l'échelle:
EDIT - MÉTHODE ALTERNATIVE
D'obtenir ce que vous voulez, je pense que la meilleure façon est d'utiliser des images de fond sur un autre élément, avec
background-size: cover
, au lieu de balises img.HTML:
Répétez l'opération pour chacune de vos images dans la grille, au lieu d'utiliser
img
balises.CSS:
Noter que la taille de l'arrière-plan n'est pas pris en charge dans les versions IE 8 et ci-dessous, si ce qui compte pour vous.
Ah. Voir mon édité réponse, n'en fonction de vos exigences?
background-size: cover;
est un outil formidable. Vous avez de l'envelopper tout<a>
balises autour de votrediv
s ou qu'avez-vous, mais c'est autorisé en HTML 5.Avec en arrière-plan, la taille de l'approche ci-dessus, vous avez des images légèrement zoomée sur des écrans plus grands, qui ne regarde pas toujours mauvais. S'il a l'air méchant, de la façon la plus simple de contourner ce problème consiste à inclure des images plus grandes, ou faire un peu de javascript ou de la requête de média de détection de charge supérieur res fichiers sources.
S - ou tout simplement utiliser le
a
avec des étiquettes de fond sur eux-mêmes et d'affichage de blocOriginalL'auteur Josh Harrison
Il y a 3 approches générales de la grille d'alignement et /ou la hauteur des enjeux dans le Bootstrap
Un CSS comme cela..
http://bootply.com/85737
Un "clearfix' approche comme cela (nécessite chaque itération x colonnes)..
http://bootply.com/89910
Enfin, vous pouvez utiliser les Isotopes ou en Maçonnerie de plugin. Voici un exemple qui utilise des Isotopes + Bootstrap 3:
http://bootply.com/109446
Plus sur le Bootstrap hauteur de l'enjeu
le clearfix solution est uniquement destinée à effacer les chars, pas en créer un de la maçonnerie comme la mise en page.
OriginalL'auteur Zim
Personne n'a suggéré de recadrage, de sorte que je vais jeter mon 2 cents.
Je voudrais utiliser un prédéfini largeur x hauteur sur la grille version des images de plus grandes, irrégulières version. En fait, même si la plus grande version n'était pas irrégulière, je serais probablement encore le faire. Le sous-jacent de balisage serait encore une grille, Fondation, Bootstrap, que ce soit.
De cette façon, vous pouvez toujours le lien vers le large /taille d'origine et l'utilisation de la grille ou de vignettes, le cas échéant. Pour un site statique je voudrais faire cela à la main, pour un site dynamique, je serais d'utiliser un processeur d'image qui me donne des styles différents automatiquement, par exemple,
example.com/image-styles/thumb/photo.jpg
.Évidemment différentes images ont besoin d'être recadrée de façon différente, mais si vous n'avez pas de soins sur où la récolte arrive, tu pourrais juste mettre l'image à l'intérieur d'un
div
etoverflow: hidden;
l'ensemble de la chose: http://jsfiddle.net/785gN/L'inconvénient de cette est que vous êtes en supposant que toutes les images sont de forme carrée ou paysage, portrait (ou vice versa). Vous pouvez également utiliser une image de fond d'écran avec
background-size: cover;
comme cela a été suggéré.OriginalL'auteur Charlie Schliesser