Mosaïque d'image responsive

Bonjour le forum, et merci d'avance à ceux qui prennent le temps de lire et aider !

Alors voilà, ca fait un certain temps que je galère, j'essaye divers solutions issues de stackoverflow, d'ici même ou d'ailleurs, finalement ça ne marche pas alors j'attaque autre chose, j'y reviens plus tard sans plus de succès, au bout d'un moment j'ai choisi de demander de l'aide !

J'ai dans l'idée une mosaïque d'image quelconque. J'aimerai dans le cas présent avoir deux image à gauche, et une image à droite, le tout harmonieusement harmonisé ( ) en hauteur !

Squelette dégrossi du problème (peut être qu'il est à revoir d'ailleurs, mais j'en suis arrivé là a force d'essayer différentes solutions trouvées sur le net.)

<div class="left-right-container">
      <div class="left">
        <a id="img1" href="">
          <figure>
            <picture>
              <source srcset="" media="(min-width: 1024px)" />
              <img src="" />
            </picture>
            <figcaption>
              toto à la plage
            </figcaption>
          </figure>
        </a>

        <a id="img2" href="">
          <figure>
            <picture>
              <source srcset="" media="(min-width: 1024px)" />
              <img src="" />
            </picture>
            <figcaption>
              toto à la montagne
            </figcaption>
          </figure>
        </a>
      </div>
      <div class="right">
        <a id="img3" href="">
          <figure>
            <picture>
              <source srcset="" media="(min-width: 1024px)" />
              <img src="" "/>
            </picture>
            <figcaption>
              toto à l'école
            </figcaption>
          </figure>
        </a>
      </div>
    </div>

Pour plus de clarté, j'ai imagé le but de tout ça: LIEN

Mon CSS (SASS d'ailleurs)

    
.left-right-container
  width: 100%

.left
  float: left
  width: 40%
  margin: 0
  margin-left: 9%
    #img, #img2
      width: 100%
      display: block
      figure
        width: 100%
        margin: 0
        padding: 0
        img
          width: 100%

.right
  float: right
  width: 40%
  margin: auto
  margin-right: 9%
    #img3
      width: 100%
      figure
        width: 100%
        margin: 0
        padding: 0
        img
          width: 100%

J'ai oublié de préciser, mais si je galère c'est parce que j'essais de garder le tout "responsive", c'est pour ça que je ne peux pas placer directement mes images en absolute ou à l'aide de dimensions fixes..
Mon code css actuel me permet d'arriver à un résultat proche de celui souhaité, à ceci près que les deux images de gauche sont collées et je ne trouve pas le moyen d'aller placer la deuxième en bas..

J'espère avoir assez détaillé, je reste dans le coin si vous avez besoin de plus d'infos ou autres..
Peut etre que je cherche midi à 14h comme on dit, ou bien que je passe à côté d'un truc bête;
Je m'en remet à vous
Modifié par Obyon (16 May 2016 - 20:23)

Bonsoir,

Je ne sais pas quels sont vos critères de rétrocompatibilité, mais moi j'utiliserais les vh et vw units qui, avec flexbox, pourrait donner ceci : A layout.

Comme vous pouvez le voir dans le code, les images sont appliquées via 'background-image' avec un 'background-size:cover'.

[A SUPPRIMER] -> Oups désolé j'ai du cliquer une fois de trop sur envoyer
Modifié par Obyon (17 May 2016 - 22:20)

Obyon a écrit :
Je ne peux pas utiliser des background pour mes images, j'utilise des <figure>

Oui, mais si vous souhaitez obtenir le résultat escompté il faut bien vous adapter. En effet, vous ne pourrez garder la maîtrise de la hauteur pour un design responsive si les images doivent garder leurs proportions :

Test avec des images.

Mais rien ne vous empêche de déclarer une image classique (puisque vous semblez y tenir, pour le référencement ?) au sein d'un élément parent qui, lui, pourrait afficher l'image via background-image.

Exemple avec ce slideshow (voir le code source).

Bonjour, encore merci pour votre aide
Je ne suis pas encore très familier avec le responsive mais effectivement il m'a bien semblé que le fait de vouloir conserver le ratio de mes images était problématique.. j’espérais que ce soit simplement moi qui n'arrive pas à paramétrer correctement ma mosaïque..

Je vais refaire en essai ce soir pour voir ce que ça peut donner en laissant les images dépasser hors champ si besoin.

Sans aller jusqu'au référencement, j'essaie de suivre des conseils que l'on ma donné, et qui me laissent penser (peut être à tort?) que sémantiquement parlant des images bien ordonnées dans des <figure> avec les légendes et "alt" qui vont bien, sont préférables à des div + background-image, même si je commence à comprendre qu'il faut parfois faire des compromis

Je repasse ce soir !

Et n'oubliez pas que vous pouvez optimiser les pages en ne chargeant que la taille d'image nécessaire à la définition du moment. À l'exemple de cette page de démonstration : Example Layout for Photoblog. Ou encore celle-ci : Layout for Photoblog 2.

Voici le code CSS de cette démo :

.demo-layout2 [class^="m"] {
  padding: 0.5rem;
  background-color: #fff;
  background-size: cover;
  background-position: 50% 50%;
}
@media screen and (max-width: 36.01rem) {
  .demo-layout2 [class^="m"] {
    background-image: url("/Images/Demo/ColorfulLeafS600.jpg");
  }
  .demo-layout2 > :nth-child(5n+2) {
    background-image: url("/Images/Demo/LotusMacroS600.jpg");
  }
  .demo-layout2 > :nth-child(5n+3) {
    background-image: url("/Images/Demo/GrassLeafS600.jpg");
  }
  .demo-layout2 > :nth-child(5n+4) {
    background-image: url("/Images/Demo/PacificCityS600.jpg");
  }
  .demo-layout2 > :nth-child(5n+5) {
    background-image: url("/Images/Demo/OldMechanismS600.jpg");
  }
}
@media screen and (min-width: 36.01rem) and (max-width: 65.01rem) {
  .demo-layout2 [class^="m"] {
    background-image: url("/Images/Demo/ColorfulLeafS1000.jpg");
  }
  .demo-layout2 > :nth-child(5n+2) {
    background-image: url("/Images/Demo/LotusMacroS1000.jpg");
  }
  .demo-layout2 > :nth-child(5n+3) {
    background-image: url("/Images/Demo/GrassLeafS1000.jpg");
  }
  .demo-layout2 > :nth-child(5n+4) {
    background-image: url("/Images/Demo/PacificCityS1000.jpg");
  }
  .demo-layout2 > :nth-child(5n+5) {
    background-image: url("/Images/Demo/OldMechanismS1000.jpg");
  }
}
@media screen and (min-width: 65.01rem) {
  .demo-layout2 [class^="m"] {
    background-image: url("/Images/Demo/ColorfulLeafS2000.jpg");
  }
  .demo-layout2 > :nth-child(5n+2) {
    background-image: url("/Images/Demo/LotusMacroS2000.jpg");
  }
  .demo-layout2 > :nth-child(5n+3) {
    background-image: url("/Images/Demo/GrassLeafS2000.jpg");
  }
  .demo-layout2 > :nth-child(5n+4) {
    background-image: url("/Images/Demo/PacificCityS2000.jpg");
  }
  .demo-layout2 > :nth-child(5n+5) {
    background-image: url("/Images/Demo/OldMechanismS2000.jpg");
  }
}

Modifié par Olivier C (19 May 2016 - 01:01)