Taille et qualité d'une image

Bonjour,
Je souhaite intégrer une image sur mon site internet. Cette image a une taille de 325px sur 325px. Or, je voudrais la faire entrer dans une div de 90px sur 90px.
Si je définis la taille de l'image dans le code html (img src="blabla" width="90px" height="90px), ça fonctionne parfaitement. Par contre, si je définis sa taille dans le code CSS, là ça ne fonctionne pas : l'image conserve sa taille réelle.

Comme je n'ai pas trouvé le moyen de rapetisser cette image sans perdre de qualité avec photoshop (il s'agit en fait d'un logo), j'aimerais savoir s'il existe un moyen de "forcer" cette image à entrer dans une div plus petite qu'elle (ca me faciliterait grandement la tâche car je souhaite faire apparaître une autre image au passage de la souris).

Merci de vos réponses et bonne semaine à tous !

Coucou il suffit d'ajouter un class à ton image dans le HTML :

< img src="" class="nom-de-ta-class" alt=""/>

et dans le CSS:

[b].[/b]nom-de-ta-class{
max-width:90px;
max-height:90px;
}

Modifié par jmlapam (06 Nov 2011 - 15:42)

Salut,
Merci de ta réponse. Toutefois, je me suis mal exprimé : je souhaite mettre l'image dans le code css (background-image:url("blabla"")) pour pouvoir la modifier au passage de la souris.
Ou y a-t-il un moyen de le faire en ayant intégré l'image dans le code HTML ?
L'idée c'est que l'image soit remplacée par une autre au passage de la souris...

Bonjour,

Pour la taille de l'image, le mieux est de la réduire avec un logiciel de traitement d'images, Photoshop, gimp... Que tu la redimensionne réellement ou que tu le fasse faire dans le navigateur le résultat sera le même (sinon, il y a un gros problème avec ton logiciel). De plus il est préférable de ne pas faire redimensionner les images par le navigateur : moins d'octet à charger pour le visiteur, plus d'espace sur ton serveur (même si ça semble minime)...

Pour le roll-over, comme ton image est porteuse de contenu (sauf si le logo ne comporte pas de texte et que la "marque" est reprise en texte à côté) elle DOIT se trouver dans le code HTML, il faudra donc utiliser du JavaScript.

>>

MaStock a écrit :
je n'ai pas trouvé le moyen de rapetisser cette image sans perdre de qualité avec Photoshop

Un logo ? En vectoriel ?


@MaStock & @Laurie-Anne: J'ai pas compris ce qui est souhaité: faire apparaître une autre image au hover si j'ai bien compris, pourquoi ne peut-il pas le faire par le CSS ? L'image au hover est aussi porteuse de contenu?

MaStock a écrit :
Par contre, si je définis sa taille dans le code CSS, là ça ne fonctionne pas : l'image conserve sa taille réelle.

Ya pas de raison que ça marche pas. Ton code doit être erroné ou cibler le mauvais élément (sélecteur faux).

MaStock a écrit :
Comme je n'ai pas trouvé le moyen de rapetisser cette image sans perdre de qualité avec photoshop (il s'agit en fait d'un logo)

Le résultat du redimensionnement à la volée par le navigateur sera moins bon que celui que tu peux obtenir avec Photoshop (en utilisant les bons réglages). Donc mieux vaut préparer une image qui fait déjà la bonne taille. Ça évite aussi aux visiteurs de ton site de télécharger une image plus lourde que nécessaire.

MaStock a écrit :
Ou y a-t-il un moyen de le faire en ayant intégré l'image dans le code HTML ?

Oui, assez simplement en utilisant JavaScript. (Ça demande d'avoir quelques bases en JS, bien sûr.)

On évite de placer les images porteuses de contenu en background. Tout simplement parce qu'un background n'est pas un contenu, et qu'en tant que tel il peut facilement être «perdu» (pour les moteurs de recherche, les lecteurs d'écran, ou bien si l'image ne se charge pas pour une raison X ou Y ou met du temps à se charger...). L'élément IMG en HTML permet de décrire un contenu avec un équivalent textuel:

<img src="logo-bidulecorp.png" alt="Bidule Corp."/>

MaStock a écrit :
L'idée c'est que l'image soit remplacée par une autre au passage de la souris...

Comme dit plus haut la solution de référence c'est de passer par JavaScript.
Une solution possible en CSS3 (support dans IE à partir d'IE9) serait de placer la seconde image comme image de fond du conteneur de l'image, et de rendre l'image de contenu transparente au survol:

<p id="logo">
  <img src="logo-bidulecorp.png" alt="Bidule Corp."/>
</p>

#logo {
  background: url(logo-bidulecorp-hover.png) no-repeat;
}
#logo:hover > img {
  opacity: 0;
}

Et en jouant avec le z-index plutôt qu'avec opacity ?
Modifié par mob (08 Nov 2011 - 12:31)

mob a écrit :
Et en jouant avec le z-index plutôt qu'avec opacity ?

Pourquoi pas. Dans ce cas il faut deux éléments dont un positionné en absolu. Donc une structure HTML un poil plus lourde, sauf à utiliser un contenu généré (via un pseudo-élément :before ou :after, compatible IE8+).
On peut aussi utiliser visibility:hidden plutôt que opacity:0, par contre ça va masquer le contenu aux lecteurs d'écran également donc si c'est un style activé au focus également c'est pas terrible.

Un poil plus lourd oui, mais ça me semble être un bon compromis par rapport à opacity et visibility:hidden !