Bonjour à tous,

En désactivant le CSS (via webdeveloper) sur le site d'Adobe,
vous constaterez que la taille de leur logo est de 210 x 255px.
Or, quand on réactive le css, il est de 43 x 52px.

Donc l'image a été redimensionnée à la volée, par le css.
Et cette image redimensionnée est propre !
C'est à dire que les pixels ne sont pas tassés, compressés etc...

Mais pour cela ils utilisent une propriété qui ne fonctionne que sur Firefox.
Donc pas terrible...

Voici le CSS de la partie concernée :
#adobe-logo 
{
width: 43px;
height: 52px;
}
/* Support printing hi-quality, printable logo */
#adobe-logo img { width:43px; /* be nice to old browsers */ }
body:-moz-last-node [id=adobe-logo] img 
{
width: 0; /* going attach a different image to be nice to the windows versions of Gecko browsers */
height: 0;
}
body:-moz-last-node #adobe-logo a::after { content: url(gnav/adobe-lq.png); /* attaching image */ }
#adobe-logo img 
{
zoom: 20%; /* IE can zoom images, dont need to be nice */
filter: Blur(Add = 1, Strength = 2) Blur(Add = 1, Direction = 90, Strength = 5); /* IE needs some smoothing*/
_width: auto; /* IE 6 */
_height: auto; /* IE 6 */
*width: auto; /* IE 7 */
*height: auto; /* IE 7 */
}


J'aimerais donc savoir si quelqu'un à un technique pour redimensionner une image à la volée,
de façon propre, et sans que l'image soit remplacée, et qui fonctionne sur tous les navigateurs ?

(En gros, comme sur le site d'Adobe, mais en mieux)

Merci d'avance.
Modifié par Maxime L.B. (24 Nov 2008 - 18:47)