pour répondre correctement, je vais d'abord clarifier les exigences:

1. les images ont toutes le même rapport: 3/2
2. images should not be cropped
3. pas d'espace entre les images
4. faire une mosaïque d'images

Vous pouvez avoir des milliers de possibilités pour afficher vos images. Je vais faire une mise en page simple qui devrait vous montrer comment construire la vôtre.

Voici un FANCY FIDDLE de ce que vous pouvez atteindre et voici à quoi il ressemble :

Première étape : réfléchir, calculer et réfléchir à nouveau

le Premier : pour simplifier, disons que vos images peuvent avoir 3 tailles (j'ai changé la taille de l'image de 1 px pour faciliter les calculs):

1. en gros : 328*492px
2. moyenne, 1/2 de grande : 164*246px
3. petit, 1/4 de gros : 82*123px

Deuxième : comme vos images sont toutes des portraits et que votre conteneur a la même hauteur que la grande image, vous devrez travailler avec des colonnes Heigh 492px qui peuvent avoir 3 largeurs:

1. en gros : 328px large, ils peuvent afficher toutes les images au format
2. moyenne : 328/2 = 164px large, ils peuvent afficher des moyennes et petites images
3. petit : 327/4 = 82px large, ils ne peuvent afficher les petites images

Troisième : combien de colonnes et quelles tailles d'image? C'est à vous, vous aurez à faire un choix en fonction de la largeur totale de votre conteneur et le nombre d'images que vous souhaitez afficher.

Mais dans votre violon, le conteneur (._pictures1) a un 935px largeur qui sera impossible à atteindre avec les largeurs de colonne choisi juste avant.

935/82 = 11.4024...

Le plus proche que vous pouvez obtenir est 82*12 = 984px large conteneur.

vous devrez soit changer la largeur du conteneur soit changer les tailles des images et des colonnes pour s'adapter à votre largeur initiale.

Ou (spoiler) vous pouvez travailler avec des pourcentages, cela peut être une alternative surtout si vous avez besoin de votre mise en page pour être responsive mais cela peut devenir compliqué et j'essaie de rendre les choses simples.

je suis sûr Que vous êtes curieux et voulez le vérifier, voici un exemple de mise en page dans un

mosaic Responsive of image

étape suivante: concevoir la mise en page

utilisez un stylo, photoshop, ou tout autre outil qui vous convient, si vous êtes vraiment bon, vous pouvez même utiliser votre cerveau pour représenter mentalement la mise en page que vous voulez.

j'ai conçu l'image que vous pouvez voir au biginng de la réponse.

comme je l'ai dit plus haut, il y a beaucoup de posibilités de mise en page (nombre de colonnes et tailles des images dans ces colonnes) donc pour l'exemple j'ai choisi 2 grandes colonnes 1 moyennes et 2 petites

328*2+164+82*2 = 984px ( = width of container so it can fit!)

dernière étape: commencez le codage!

Vous pouvez voir le résultat dans ce

FIDDLE

cette mise en page est basée sur flotteurs nous avons donc besoin de définir dans la largeur, la hauteur du conteneur, les colonnes, les images pour qu'elles puissent toutes s'ajuster l'une à l'autre (comme nous l'avons déjà pensé) avec le calcul et la conception, c'est facile).

CSS:

#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:493px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}

puis le markup HTML:

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="http://www.lorempixum.com/327/491/abstract" alt="" />
            <img src="http://www.lorempixum.com/g/327/491" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        </div>
        <div class="medium_img">
            <img src="http://www.lorempixum.com/g/327/491/business" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
        <div class="small_img">
            <img src="http://www.lorempixum.com/g/327/491/food" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
            <img src="http://www.lorempixum.com/327/491/cats" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="http://www.lorempixum.com/327/491/nightlife" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="http://www.lorempixum.com/327/491/fashion" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
    </div>
</div>