Incruster image logo dans header

Signaler
Messages postés
2
Date d'inscription
mercredi 2 janvier 2013
Statut
Membre
Dernière intervention
10 juin 2021
-
 Totox -
Bonjour,

Je n’arrive pas à réduire le logo présent dans le header. C’est une image PNG. Il y a bien sur le HTML revêtu du CSS.

Html :

<div id=« logo »>
<img src=« img/logo.png » alt=« »>
</div>


Css:

#logo{
width:auto; height: 80px;
}

J’ai le logo dans le header, mais il est trop large.

Merci !!

Configuration: iPhone / Safari 14.0.3

1 réponse

Salut,

2 solutions:
soit vous redimensionner l'image png avec un éditeur d'image(Gimp, Photoshop, Paint...).
Il y a des inconvénients à cela car c'est définitif, pour avoir une image en plus grande taille sans perte de qualité il faudra utiliser plusieurs versions. Si on modifie la taille de l'affichage il faudra aussi modifier le fichier. Bref ce n'est pas la meilleure façon de faire.

Soit vous redimensionner l'image directement en CSS (voir propriétés CSS width et height) et dans ce cas vous pouvez même vous passer du div; exemple:
<style>
#logo{
 height: 80px;
} 
</style>


<img id="logo" src="img/logo.png" alt="description image">



ou alors vous la passez en image de fond (du div)et redimensionner l'image de fond directement.
Cette dernière solution est la plus pratique et la plus souple car rien n'empêche de pouvoir rajouter facilement un texte dans le container et il est aisé de redimensionner le container(div) aussi bien que l'image de fond, voire que cela soit fait automatiquement pour plus d’adaptabilité aux différents formats d'écran(aucune mesure ne doit être dans une valeur absolue donc oublier le px pour privilégier les unités relatives comme % em pt...).

Exemples ici pour redimensionner une image de fond:
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images


ps: Bien sûr dans vôtre fichier IL NE FAUT PAS UTILISER DE CHEVRONS(« et ») MAIS DES GUILLEMETS (" " ou ' ' voire rien du tout sauf pour des mots composés cf. notification de syntaxe HTML5). Pour ça n'utilisez JAMAIS un éditeur de texte bureautique(genre word) mais un éditeur sans formatage(Bloc note, Text Edit...), de préférence un éditeur de code qui permet d'avoir une coloration syntaxique et des outils pratiques(Notepad++, Geany IDE, Eclipse etc...).

ps2: l'utilisation d'une image en arrière plan (avec background-image) est plus juste sémantiquement: l'image d'un logo ne concerne pas le contenu mais plutôt la présentation. Donc elle n'a rien à faire en type "image" qui est censé représenter un élément d'illustration, à moins que votre site soit à propos des logos ce n'est donc pas le logo qu'il faut mettre en valeur comme contenu de votre site.