28172 sujets

CSS et mise en forme, CSS3

Grid photo responsive

Bonjour à tous,

Voila, j'aimerais avoir ce rendu ci-dessous, en CSS, sans jQuery, et sans Bootstrap ou autre truc dans le même genre (ça me foire tout mon CSS à chaque fois), sans que mes images ne dépassent en bas.
Je veux que ça soit bien symétrique et bien aligné, peu importe la taille de l’écran.

J'ai fais plein de tests, dont les propriétés flex-box, grid, row, etc. Mais rien n'y fait. Toujours une image qui sort du cadre ou qui n'est pas bien aligné.

Du coup je recommence tout à zéro.
Est-ce que l'un d'entre vous aurais un bout de code simple m'aidant à résoudre mon soucis ?
Merci d'avance de votre aide.
J'essaye d'avancer et de vous fournir un bout de code via CodePen demain.

http://www.netpom-web-agency.com/img/mosaiques-clients
Modifié par fanny95 (10 Jul 2015 - 13:21)
Voici le code qui me fait buger (desolee pas de compte sur CodePen) :

<div class="container">
        <div class="row">
            <div class="column col-50"><img src="<?= _IMG.'projets/alchemy.jpg' ?>" /></div>
            <div class="column col-50"><img src="<?= _IMG.'projets/alchemy.jpg' ?>" /></div>
        </div>
        <div class="row">
        	<div class="column">
                <div class="flexbox">
                    <div class="block">bloc 1</div>
                    <div class="block">bloc 2</div>
                </div>
            </div>
            <div class="column col-67"><img src="<?= _IMG.'projets/boudoir.jpg' ?>" /></div>
        </div>
        <div class="row">
            <div class="column col-33"><img src="<?= _IMG.'test-portrait.jpg' ?>" /></div>
            <div class="column col-33">33%</div>
            <div class="column col-33">33%</div>
        </div>
    </div>

.container { width:100%; background:#ECECEC; border-spacing:10px; border-collapse:separate; margin:0 0 30px 0; }
.row { display:table; width:100%; }
.row .column { display:table-cell; color:#ffffff; text-align:center; vertical-align:middle; }
.row img { width:100%; display:list-item; }

.row .col-50 { background:#c12770; width:50%; }
.row .col-30 { background:#ECECEC; width:30%; }
.row .col-67 { background:#e2cfc3; width:67%; }
.row .col-33 { background:#bdbe5e; width:33.33%; }
.row .block  { background:#5c9ebe; }

.flexbox { height:78vh;
background:#eee;
margin: 0; padding: 0;
display: -webkit-flex; /* OK chrome 21 */
-webkit-justify-content: flex-start;
display: flex;
justify-content: flex-start;
flex-direction:column;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.flexbox div {color:#fff; padding:10px; }


Rendu 01 (taille normal sur 15')
http://www.netpom-web-agency.com/img/rendu01.png
Rendu 02 (ecran plus petit)
http://www.netpom-web-agency.com/img/rendu02.png
Modifié par 6l20 (10 Jul 2015 - 08:01)
Administrateur
Bonjour,

Deux questions importantes :
- est-ce que tu maîtrises l'orientation des images ? (= est-ce que tu sais exactement quelles images - carrée, portrait, paysage - seront affichées à quel endroit ?)
- est-ce que tu maîtrises ton HTML ? (= tu peux créer des imbrications où tu veux, ou bien tout doit fonctionner avec un HTML automatique ?)

Une petite démo / tuto qui pourras te donner des pistes : http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox
Tiens ! L'occasion d'essayer la dernière version de mon petit framework perso : Scriptura

Allez voir le code source de la grille ici si ça vous intéresse (@Section Grid) : _core.scss
Modifié par Olivier C (10 Jul 2015 - 21:52)
Merci pour vos réponses.
Pour répondre à Rafael :
- Oui je maitrise l'orientation des images, ça sera tout le temps le même format, ça sera plus simple/
- Je peux créer des imbrications où je veux, c'est moi qui maitrise mon code.

Par contre, autre chose que j'ai oublié de dire, parfois dans mes blocs il y aura du texte, parfois des images, ça dépends.

Ci-joint le rendu avec le bug que je n'arrive pas à fixer sur cette ligne.
Lien du bug

J'aimerais faire en sorte que l'ensemble de mes images soit avec les même marges.

J'ai fais quelques recherches pour voir comment le site qui a le resultat que je souhaite font pour ne pas avoir de bug, et ils utilisent la propriété background avec les cover/contain pour que ce soit niquel.
Lien du site.
Raphael a écrit :
Beau boulot, bravo ! Smiley smile

@Raphael : De rien, je me suis en partie inspiré de tes tutos. Perso c'est surtout la fonction calc() que je trouve révolutionnaire, pour les gouttières.

fanny95 a écrit :
J'ai fais quelques recherches pour voir comment le site qui a le résultat que je souhaite font pour ne pas avoir de bug, et ils utilisent la propriété background avec les cover/contain pour que ce soit niquel.


@fanny95 : Moi c'est ce que j'aurais fait aussi (enfin pour un template) : background-image donc, lié à la propriété background-size: cover et un ajustement avec background-position.

Mon code précédent mis à jour.
Sujet clos
Aller à