 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Spécifier la taille d'une image en pourcentage via CSS |
| |
| Une technique qui permet d'obtenir un design fluide, avec des images suivant l'évolution de la taille de ses conteneurs.
(25/08/2005) |
 |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
La fluidité d'un design, c'est-à-dire sa capacité à occuper
un espace raisonnable de l'écran quelle que soit sa résolution,
est de plus en plus un impératif, maintenant que les utilisateurs
peuvent utiliser du 800*600 comme du 1600*1200 (du simple au
double, donc).
Seulement, les images sont a priori conçues pour être affichées
avec une certaine taille. CSS permet pourtant de définir leur
taille en pourcentage plutôt qu'en pixels, ce qui permet dans
certains cas de fluidifier certains éléments d'interface.
.image50pc { width: 50%;}
.image100pc { width: 100%;}
Le principe
à enregistrer : l'image s'affiche à la taille que lui laisse
son conteneur. Si ce dernier fait 250 pixels de large et que
l'image est déclarée à 50%, elle occupera 125 pixels en tout.
Le conteneur obéissant lui-même à l'espace alloué par
son propre conteneur, la succession de pourcentages peut être
difficile à apprécier, aussi faut-il réserver cette technique
aux CSS simples.
Attention, si l'ensemble des conteneurs est spécifié en pourcentage,
c'est alors la taille du navigateur qui détermine celle des
éléments de la page. |
|
|
|
|
|
|
Accueil
