web-dev-qa-db-fra.com

Mosaïque d'images HTML / CSS

Je souhaite créer une disposition d'image avec des images de portrait à l'intérieur d'un div avec un rapport hauteur/largeur fixe de 3:2. La taille des images est 327x491px.

Le problème principal est les espaces indésirables entre les images. Comment aligner les images en 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

htmlcssresponsive-designgrid-layoutaspect-ratio
18
Developer Desk

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

  1. les images ont toutes le même rapport d'aspect: 3/2
  2. les images ne doivent pas être recadrées
  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 réaliser et voici à quoi cela ressemble:

Mosaic of images in html/css - example layout

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

Premièrement: Pour faire simple, disons que vos images peuvent avoir 3 tailles (j'ai changé la taille de l'image de 1 px pour faciliter les calculs):

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

Deuxièmement: 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 de hauteur 492px qui peuvent avoir 3 largeurs:

  1. gros : 328px large, ils peuvent afficher toutes les images de taille
  2. moyen : 328/2 = 164px large, ils peuvent afficher des images moyennes et petites
  3. petit : 327/4 = 82px large, ils ne peuvent afficher que de petites images

Troisième: Combien de colonnes et quelles tailles d'image? Cela dépend de vous, vous devrez faire un choix en fonction de la largeur totale de votre conteneur et du nombre d'images que vous souhaitez afficher.

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

935/82 = 11.4024...

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

Vous devrez soit modifier la largeur du conteneur, soit modifier la taille des images et des colonnes pour correspondre à votre largeur initiale.

Ou (spoiler) vous pouvez travailler avec des pourcentages, cela peut être une alternative surtout si vous avez besoin que votre mise en page soit réactive mais cela peut devenir compliqué et je suis essayer de rendre les choses simples.

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

Mosaïque d'images réactive

É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 début de la réponse.

Comme je l'ai dit auparavant, il existe de nombreuses possibilités de mise en page (nombre de colonnes et tailles d'images dans ces colonnes), donc pour l'exemple j'ai choisi 2 grandes colonnes 1 moyenne et 2 petites

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

Dernière étape: commencez à coder!

Vous pouvez voir le résultat dans ce

VIOLON

Cette disposition est basée sur floats nous devons donc définir la largeur, la hauteur du conteneur, les colonnes, les images afin qu'elles puissent toutes s'ajuster les unes à côté des autres (comme nous l'avons déjà pensé avec le calcul et 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;
}

Alors le balisage 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>
32
web-tiki

Si vous définissez une dimension ou l'autre, mais pas les deux, les images doivent être redimensionnées de manière fluide. Essayez de définir uniquement la largeur en pourcentage.

4
tuespetre

Tout d'abord, pour supprimer l'espace entre les images, supprimez simplement la valeur "0" padding et margin.

Ensuite, pour réaliser ce que vous voulez, vous pouvez utiliser ou combiner ces stratégies:

1) Attribuez une taille fixe en pixels à l'une des tailles: l'autre sera mise à l'échelle automatiquement.

2) Vous pouvez calculer la taille dont vous avez besoin via javascript et attribuer la valeur de manière dinamique. Par exemple avec le framework jQuery:

$(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 selon vos besoins, statiques ou dinamiques ( w3c docs

2
MrPk

Le positionnement absolu ne semble pas être le meilleur choix si vous souhaitez conserver dynamiquement les mêmes positions et le même rapport.

Le flux HTML natif est généralement le chemin à parcourir. Le positionnement absolu est comme les comprimés de vitamines. Vous l'utilisez quand vous en avez besoin, mais ce n'est pas votre nourriture principale. ;)

Ce que je ferais c'est:

  1. positionnez simplement le conteneur comme vous le souhaitez (centré par exemple) et dimensionnez sa largeur avec le pourcentage de la fenêtre/section dans laquelle il se trouve.

  2. Ensuite, vous mettez vos divs ._pictures1-xx à l'intérieur, et dimensionnez la largeur des photos en utilisant le pourcentage du conteneur. La hauteur gardera le rapport automatiquement (*)

  3. Je ferais alors afficher les divs ._pictures1-xx "inline-block" et flotter "left". Ensuite, un petit div avec clairement "les deux" après la dernière photo et fermez le récipient.

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

J'espère que cela a été utile.

1
Alice Rocheman

Je voudrais donner une solution simple.

Vous pouvez simplement envelopper la balise img avec DIV. Et vous devez appliquer CSS à cette DIV enveloppée.

Exemple de code

<img src='some_image.jpg'>

<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 à l'intérieur de la classe .img_wrapper aurait un rapport d'aspect correct.

1
Kushal Jayswal

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

0
M. R. Wilson

aspectRatioResizeImg
Il s'agit d'un plugin jQuery qui permet de redimensionner une image en préservant son rapport hauteur/largeur, en ajustant un conteneur. Facultativement, le conteneur peut être redimensionné pour correspondre au rapport d'aspect de l'image.
https://github.com/stereoactivo/jquery.resize-image-aspect-ratio

0
Amin Arab

Essayez quelque chose comme ça

Coiffant

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;
}

C'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
Chintan Bhatt
img{
 height: auto;
 width: 50%
}
0
somethinghereplease1

envelopper votre image avec un div. réglez la largeur et la hauteur du div en fonction du rapport. Ne donnez que la hauteur de l'image. Si vous voulez que l'image ne prenne que de l'espace, vous devez utiliser display: inline also

0
Asghar C