Redimensionner image CSS

Fermé
haimache - 7 déc. 2021 à 11:37
wigo78 Messages postés 2 Date d'inscription jeudi 6 janvier 2022 Statut Membre Dernière intervention 7 janvier 2022 - 7 janv. 2022 à 13:00
Bonjour,
Dans le cadre d'un exercice scolaire, je dois créer un site plutôt simple en HTML. J'ai ajouté une image sur mon site que je souhaite redimensionner avec une classe CSS, seulement je n'y arrive pas ! L'image apparait bien, mais pas aux dimensions que je souhaite. J'ai pourtant créé d'autres classes CSS pour d'autres parties de ma page HTML qui fonctionnent bien, mais là ça bloque.
Si quelqu'un a une idée je suis preneur ! Autrement je la redimensionnerai directement en HTML... Merci !

HTML :

<div>
<img class="monimage" src="palette_couleurs.png"/>
</div>

CSS :

.monimage {
width: 50px;
height: 50px;
}
A voir également:

4 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
7 déc. 2021 à 13:02
Bonjour,

L'extrait de code html et css ne contient pas d'erreur et devrait fonctionner correctement.

Tu peux utiliser les outils de développement de ton navigateur (Inspecteur) pour vérifier que le css est bien pris en compte (penser à vider le cache au casou).
https://developer.mozilla.org/fr/docs/Tools/Page_Inspector

Tu peux également utiliser les validateurs w3c pour vérifier que ton document html ou que ta feuille de style css ne contiennent pas des erreurs :
https://validator.w3.org/
https://jigsaw.w3.org/css-validator/

Pour améliorer le temps de chargement de la page, l'idéal serait dans tous les cas de modifier l'image d'origine afin de la redimensionner selon la taille à laquelle elle sera affichée sur le site.

Bonne journée,
1
Bonjour,

Merci pour votre réponse complète.
Je vais essayer tout ça.

Bonne journée également.
0
wigo78 Messages postés 2 Date d'inscription jeudi 6 janvier 2022 Statut Membre Dernière intervention 7 janvier 2022
Modifié le 6 janv. 2022 à 20:33
Pour les images moi je configure en html directement sans CSS, avec une valeur en % pour le width et non en px, l'image s'adapte à l'interface du visiteur, pas besoin de mentionner la hauteur qui s'adapte. Et cela n'a aucune incidence sur le chargement de la page.
J'utilise aussi l'éditeur html krama, qui permet d'éditer rapidement divers éléments en html, comme des boutons de partage pour les réseaux sociaux ou autre
0
Salut,
Avez vous vider le cache du navigateur.
Il y a une autre remarque que je pourrais faire. Vous donner des dimensions pour une image carré. Si l'image est rectangulaire c'est évidemment normal que les dimensions ne puissent être appliquées correctement.

@wigo78:
" moi je configure en html directement sans CSS"

Ce qui est bien sûr surtout à ne pas faire...il y a quelques exceptions mais pas pour un élément image. Savez vous quel est le rôle et l'utilité du CSS? du HTML? Ce qu'est un DOCTYPE et l'utilité des normes sur la production?
Pour cette dernière question je vais vous répondre que les normes permettent que les contenus s'affichent uniformément pour tout les utilisateurs(résolvent et empêchent les problèmes de compatibilité et de différence possible d'affichage appelée communément bug d'affichage)
Au delà l'aspect normatif est une conséquence de fonctionnalités du CSS que HTML ne possède pas seul, un enrichissement et non une complication inutile(qui rendrait inutile CSS).

Pour plus de détails sur ces avantages fonctionnels (et conceptuels) ici c'est bien expliqué(1er paragraphe):
https://www.scriptol.fr/creation-site-web/tutoriel-css.php

"l'éditeur html krama, qui permet d'éditer rapidement divers éléments en html, comme des boutons de partage pour les réseaux sociaux ou autre "
le rôle d'un éditeur est bien d'éditeur des langages web est avant tout un éditeur de textes(on parle aussi de script).
L'éditeur Krama dont il est dur de trouver des traces dans une recherche(dont pas vraiment un gage de popularité et par extension de validité auprès du public) utilise explicitement Bootstrap 4 et HTML5 avec CSS3. Bootstrap est une technologie(framework) qui se base sur CSS(avec une couche de programmation pour fournir un modèle de mise en page ), HTML5 est une norme du langage HTML5 qui fait la distinction entre l'utilisation de CSS et HTML(ce qui est le cas depuis HTML3 et explique les difficultés qui ont nécessité le DOCTYPE transitional...qui était une phase de transition entre le tout HTML et l'implication du CSS). Bien sûr l'intérêt et l'utilisation du CSS n'est pas que normatif, il répond à une demande à laquelle HTML ne peut et ne doit pas répondre qui facilite(le développement et le résultat des pages web) et permet des possibilités(et avantages) qui n'existent pas sans.
Dans le cadre de l'éditeur que vous utilisez ça montre que vous ne l'utilisez pas correctement(ce qui implique une perte de qualité du résultat obtenu, la possibilité de bug et d'incompatibilité et d'autres impact possibles qui sont négatifs pour la qualité d'"un site et son exploitation ).


Ceci étant dit vous parlez de bouton de partage. Hors dans ce cas on est dans un autre cadre que HTML puisque un bouton HTML est virtuellement n'importe quel élément de la page et les fonctionnalités de partage(la conséquence du clic sur un bouton) s'effectuent sur le serveur des services proposés(donc sans rapport avec HTML puisque HTML s'applique que dans le contexte de la page consultée et au moment où la page est affichée).
Visiblement vous ne savez pas de quoi vous parlez et faites des mélanges et raccourcis qui peuvent induire à des mauvaises pratiques et des erreurs(conceptuelles aussi bien que fonctionnelles). Faites grandir vos connaissances au lieu de répondre en laissant parler votre ignorance :)
0
wigo78 Messages postés 2 Date d'inscription jeudi 6 janvier 2022 Statut Membre Dernière intervention 7 janvier 2022
Modifié le 7 janv. 2022 à 13:13
" Savez vous quel est le rôle et l'utilité du CSS? du HTML? Ce qu'est un DOCTYPE " ? :o lol ... Bon j'ai pas tout lu LusRegio je me suis arrêté à ces questions d'expert... Quoiqu'il en soit mon site présente superbement les images en configuration html uniquement. (mon site est noté B+ minimum par tous les site audit du Web... Cette note est basée sur divers critères, le seo, l'usabilité et la "responsivité" (images ;) ... Etc... B+ et je n'ai pas fini de le faire progresser,, j'en suis au début ;)
0