1485 sujets

Web Mobile et responsive web design

[instagram] intégration images carrées responsive

Bonjour à toutes et tous,

J’ai besoin d’intégrer les 6 dernières images du compte Instagram de mon client de manière dynamique.

Pour la partie création et intégration pas de soucis c’est fait, là où j’ai un vrai soucis c’est d’avoir des images carrées et surtout responsive quelque soit le format (paysage ou portrait).

L’idée c’est d’avoir un emplacement de 3 photos sur 2 rangées et que le conteneur ne fasse que 50%.

J’ai essayé un Max de choses en css mais je n’y parviens pas. J’en suis arrivé au stade de le demander si c’est faisable qu’en css ou s’il me faut un traitement php ...

Si vous aviez des pistes je suis preneur.

Je peux vous partager mon code si nécessaire mais j’ai fait tellement de modif que je ne suis pas certain que cela vous aide beaucoup.

Merci d’avance pour votre aide / piste.
Modifié par Bidules (06 Feb 2018 - 00:29)
Administrateur
Hello,

C'est tout à fait possible en CSS.

Dans l'idéal, tu auras besoin de :
1- object-fit: cover; pour adapter tes images à leur parent
2- d'une grille (Grid Layout ou Flexbox)

Voici un exemple en live : https://codepen.io/raphaelgoetter/pen/pgRQwv
(Note : la partie JavaScript est ici optionnelle, elle ne fait qu'ajouter les classes "portrait" ou "landscape" dynamiquement sur les images mais tu peux très bien le faire à la main)

Bonne journée !
Merci Raphael,

J'avais essayé avec object-fit justement mais cela ne fonctionnait pas, je vais réessayer en m'inspirant du lien que tu m'as mis.

Je te tiens informé !

Bonne journée.
upload/1517911398-69616-problemeinsta.jpg
Raphael a écrit :
Hello,

C'est tout à fait possible en CSS.

Dans l'idéal, tu auras besoin de :
1- object-fit: cover; pour adapter tes images à leur parent
2- d'une grille (Grid Layout ou Flexbox)

Voici un exemple en live : https://codepen.io/raphaelgoetter/pen/pgRQwv
(Note : la partie JavaScript est ici optionnelle, elle ne fait qu'ajouter les classes "portrait" ou "landscape" dynamiquement sur les images mais tu peux très bien le faire à la main)

Bonne journée !


Je viens d'essayer à l'instant et cela me refait exactement ce à quoi j'étais déjà arrivé, c'est à dire que les portraits ne se mettent pas en carré.

J'étais arrivé à ce résultat sans grid mais avec flex effectivement. J'avoue tourner en rond et ne pas comprendre ni pourquoi cela me fait cela, ni comment y arriver Smiley decu

J'ai mis un imprime ecran en plus (j'ai volontairement débordé sur la partie droite et basse pour vous montrer).

Partie droite : slider géré avec bootstrap
Partie basse : footer.

Besoin de mon code ? Je suis avec twig si besoin Smiley smile .
Modifié par Bidules (06 Feb 2018 - 11:03)
Administrateur
Si tu veux forcer l'affichage en carré, il suffit d'enlever la moitié de mes adaptations et se contenter d'une grille dont les cellules sont fixées en largeur *et* en hauteur.

Exemple vite fait : https://codepen.io/raphaelgoetter/pen/gvwaey?editors=1100

.container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, 250px);
  grid-auto-rows: 250px;
}
.container img {
  max-width: 100%;
  align-self: stretch;
  justify-self: stretch;
  object-fit: cover;
}
.fit-left {
  object-position: left;
}
.fit-right {
  object-position: right;
}
Meilleure solution
Merci beaucoup Raphael,

Désolé je débute complétement et surtout sur grid que je ne maitrise mais alors pas du tout !!!

Si je peux abuser ... j'ai une dernière chose à te demander, j'utilise bootstrap4 pour la grille, du coupo j'ai divisé mon espace en 2 parties de 6, à gauche mon instagram, à droite un slider.

Les images sont nickels car carrées mais mon dernier soucis c'est : comment je peux m'assurer qu'elles soient carrées tout en occupant tout l'espace (100% de gauche à droite en restant toujours 3*2, sans bordure sans rien) stp ?

Merci beaucoup et désolé d'abuser de ton temps Smiley decu
Sujet clos
Aller à