Discussion :

[abc.xyz]

Bonjour,

je souhaite découper une page en 15 vignettes égales avec la même image en fond de chaque vignette.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
html,body{
 
 height:100%;
 
}
.a{
 
  float:left;
  width:20%;
  height:33.3%;
  background: url(img/image.jpg);
  background-size:100% 100%;
 
}

voilà le code pour un de mes quinze div, c'est juste mais le pb est que l'image est deformée.

merci

[Invité]

Bonjour,

Si l'image de fond n'a pas un ratio de 20/33.3, alors c'est normal qu'elle soit déformée.

Cela dit...... height:33.3%;... de quoi ??
Autant c'est très clair pour la largeur, autant c'est compliqué pour la hauteur *...
* il faut (parfois/souvent) avoir recours au JavaScript pour conserver le ratio.

Une solution :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

background-size:cover;

L'image de fond n'est pas déformée.

[abc.xyz]

je souhaite decouper la page en 3 bandes de 5 vignettes, de hauteur un tiers de la page chacune (d'où le 33.3%).

avec le background cover l'image n'est pas déformée mais elle n'est pas visible dans son integralité dans l'espace qui lui est allouée c'est l'inconvenient du background cover, donc lorsqu'on veut decouper une page en vignettes avec des width et height en % il n'existe pas de moyens d'adapter les images en consequence.
comment faire des images comme ici http://www.harrisongrierson.com/projects ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.a{
  float:left;
  width:20%;
  height:33.3%;
  background: url(img/image.jpg);
  background-size:cover;
}

[Invité]

1- Dans l'exemple que tu montres les images sont coupées (cover).

2- Au lieu de float:left, intéresse-toi aux flexbox (display:flex)

[abc.xyz]

display:flex représente un inconvénient majeur: sa compatibilité avec les versions antérieures à IE 10.

Quant à l'adaptation sur une page html des images dans des rectangles (ou cellules) de largeurs et de hauteurs dont les width sont en %, la solution déjà citée dans ce post est je pense le background cover MAIS en adaptant la taille des images en conséquence car sur une grande cellule (où l'on souhaite afficher une image) dont la width sera de 20% par ex et bien le background cover tronquera une grande partie de l'image à l'affichage alors que si on reduit considerablement la taille de l'image une partie beaucoup moins importante de l'image sera tronqué à l'affichage par le background cover

je ne vois pas d'autre solution donc que effectivement le background cover pour cadrer au mieux des images dans des cellules de widt et de height en %

[DMC]

Bonjour abc.xyz

Je t'ai fait une petit exemple à voir si cela fonctionne sur tous les nav, y a pas de raison mais bon!
La hauteur s'adapte en fonction de ton image

https://codepen.io/Zonecss/pen/KoELjw