Bonjour tout le monde,

Les images et bootstrap c'est toutes une histoire, il y a des tones de tutos pour arrondir, superposer, rendre une image responsive...

Mais lorsque le sujet ce corse, la situation est un peu plus complexe !

Ce que j'aimerais faire c'est ce genre de choses : https://jsfiddle.net/bbdn5ptf/ 

Le problème c'est que je ne suis pas fan du "Absolute" mais je pense ne pas avoir d'autre choix..

Si vous avez des idées ou même des tutos pour faire des formes avec plusieurs images :) 

L'une des solutions serait de tout rassembler en une image mais j'ajoute des animations sur chaque images par la suite !

Merciiiiiiii d'avance.

Bonjour,

flex et son justify-content:space-between peut être une solution pour avoir deux images à gauche et à droite d'une <div> quelle que soit sa largeur,
en changeant la taille des image avec les media queries, par exemple,
et le chateau en image de fond de la <div> principale contenant les deux <div> supérieure et inférieure, chacune contenant deux images ?

Je fais des tests, mais précise quand même ce que tu veux exactement

-
Edité par ChrisLebure 18 octobre 2017 à 12:44:35

D'accord je comprend je vais me pencher sur le justify-content !

Le résultat final serait final serait Une image centrale et une image sur chacun des angles (en haut à gauche, en haut à droite, en bas à gauche et en bas à droite mais toutes ces images vont chevaucher l'image centrale : voir le fiddle).

Deuxième solutions que j'ai trouvé c'est de mettre mon image centrale en background-image, et faire 2 rows un peu comme ceci : https://jsfiddle.net/bbdn5ptf/2/ 

La finalité devrais ressembler à ceci mais ce qui me dérange c'est que les images n'agisse pas comme un seul block j'aimerais que la distance entres les images apple et le château varie trop en fonction de la taille de l'écran..

est-ce que ceci s'approche de ton projet ?

https://codepen.io/farang/pen/GMPwrd

j'ai ajouté des couleurs de fond opaques à 50% pour que tu vois bien comment flex distribue les deux divs haut et bas, et les images de coin

-
Edité par ChrisLebure 18 octobre 2017 à 14:49:11

Ha oui en effet c'est claire et efficace ! Merci beaucoup !

ps: tu aurais des tutos complet sur du html5 et css3 un peu poussé ou même des sites type "Codecombat" je trouve que l'internet manque de ce genre de chose surtout aussi bien fait que OPC..

-
Edité par Quentin_Panda 18 octobre 2017 à 16:42:54