Mosaïque D'images HTML / CSS

je veux faire une mise en page d'image avec images de portrait dans un div avec un rapport d'aspect de 3:2. La taille des images est 327x491px.

le problème principal est celui des espaces non désirés entre les images. Comment puis-je aligner les images comme une mosaïque en utilisant uniquement HTML / CSS?

HTML :

<div id="pictures1" class="_pictures1 grid">
    <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
    <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
     ... SO ON ...
</div> 

CSS:

._pictures1 {
    width: 935px; height: 490px;
    margin: -26px 0 0 59px;
    float: left;
    top: 20%; left: 20%;
    position: absolute;
    border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: 200px; left: 0px;}
/* ... SO ON ... */

jsfiddle

18
demandé sur web-tiki 2014-03-06 14:14:58

10 réponses

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 :

Mosaic of images in html/css - example layout


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>
31
répondu web-tiki 2015-03-06 11:43:50

Si vous définissez une dimension ou l'autre, mais pas les deux, les images redimensionner de manière fluide. Essayez de définir juste la largeur à une unité de pourcentage.

4
répondu tuespetre 2014-03-13 14:56:14

tout d'abord, pour supprimer l'espace entre les images, il suffit de supprimer défini à '0' padding et margin.

Puis faites-en ce que vous voulez, vous pouvez utiliser ou combiner ces stratégies:

1) Assignez une taille fixe en pixel à l'une des tailles: l'autre se dimensionnera automatiquement.

2) Vous pouvez calculer la taille dont vous avez besoin via javascript et assigner la valeur dinamically. Par exemple avec jQuery framework:

$(img).each(function(){
 var h = this.height();
 var w = this.width();


 if (w => h){
  this.attr('width', w*0.66);
}
else {
  this.attr('height',h*.066);
}
});

3) vous pouvez utiliser CSS background-image pour les divs et background-size: cover ou background-size: contain comme vous avez besoin, statiquement ou dinamically ( W3C docs

2
répondu MrPk 2014-03-13 15:10:13

positionnement Absolu ne semble pas être le meilleur choix si vous voulez dynamiquement garder les mêmes positions et ratio.

le flux HTML natif est habituellement la voie à suivre. Le positionnement absolu est comme des comprimés de vitamines. Tu l'utilises quand tu en as besoin, mais ce n'est pas ta nourriture principale. ;)

Ce que je voudrais faire c'est :

  1. il suffit de positionner le conteneur comme désiré (centré par exemple) et de dimensionner sa largeur avec le pourcentage de fenêtre / section c'est dedans.

  2. puis vous mettez votre ._pictures1-xx divs à l'intérieur, et la taille de la largeur des pics en utilisant le pourcentage du conteneur. Hauteur de conserver le ratio automatiquement (*)

  3. je ferais alors le ._pictures1-xx divs affichage "inline-block" et flotter "à gauche". Puis un petit div avec des"deux" clairs après le dernier pic et fermer le container.

(*) rappel : la largeur ou la hauteur par défaut la valeur est "auto", c'est-à-dire n'importe quelle taille qui maintient le rapport d'image lorsque l'autre est une valeur px/%. Les marges horizontales deviennent nativement dynamiques lorsque la hauteur de vos pics est définie, afin de conserver les rapports de vos pics. Si vous définissez la largeur et laissez la hauteur auto, alors la hauteur est dynamique afin de garder le rapport des pics, et les marges ne changent pas.

j'espère que cela vous a été utile.

1
répondu Alice Rocheman 2014-03-15 01:44:30

je voudrais donner une solution simple.

vous pouvez simplement envelopper img balise DIV. Et vous devriez appliquer CSS à cette DIV enveloppée.



Exemple De Code

Au lieu de cela
<img src='some_image.jpg'>
Utilisation sous forme de structure
<div class="img_wrapper">
     <img src='some_image.jpg'>
</div>



CSS

//  suggestion: target IMG with parent class / ID
.img_wrapper img{
    width: 100%; 
    height: auto;
} 

toutes les images dans la classe .img_wrapper aurait le rapport d'aspect approprié.

1
répondu Kushal Jayswal 2014-03-19 07:54:56

enveloppez votre image d'un div. réglez la largeur et la hauteur pour le div selon le ratio. Donnez seulement la hauteur de l'image. Si vous voulez que l'image ne prenne que de l'espace, utilisez display:inline aussi

0
répondu Asghar C 2014-03-13 17:06:31

Essayez quelque chose comme ceci

Style

body{
    background: black;
    width:80%;
    margin:5em auto;
    display:block;
}
.wrapper{
    background:#FFF;
    float:left;
}   

.container{
    height:476px;
    width:192px;
    display:inline-block;
    float:left;
}
.small{
    height:188px;
    width:125px;
    display:block;
    margin:0 auto;
    background:#333;
}
.medium{
    background:#666;
    width:192px;
    height:288px;
}
.large{
    height:476px;
    width:200px;
    background:#999;
    display:inline-block;
    float:left;
}

Ceci est HTML

<div class="wrapper">
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
        <div class="small">
            <div class="small_inner">
            </div>
        </div>  
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">

            <div class="medium_inner">
            </div>
        </div>
    </div>
</div>
0
répondu Chintan Bhatt 2014-03-13 21:04:27
img{
 height: auto;
 width: 50%
}
0
répondu somethinghereplease1 2014-03-15 01:09:33

spectratioresizeimg

Il s'agit d'un plugin jQuery qui permet de redimensionner une image en préservant son format, en ajustant un conteneur. Optionnellement le conteneur peut être redimensionné pour correspondre à l'aspect de l'image ratio.

https://github.com/stereoactivo/jquery.resize-image-aspect-ratio

0
répondu amin arab 2014-03-18 20:07:37

d'après mon expérience: si vous définissez seulement la dimension de de la hauteur ou de la largeur (pas) l'image sera mise à l'échelle en conséquence.

0
répondu M. R. Wilson 2014-03-20 12:42:22