 |
|
|
| |
| 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.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius |
|
|
|
|
|
|
