Menu

Comment redimensionner des images en HTML ? [Résolu/Fermé]

- - Dernière réponse :  habitat - 23 mars 2019 à 09:14
Bonjour,

Je fais actuellement une photothèque sur un site et j'aimerais que toutes les photos que j'affiche soient toutes diminuées de 50% par exemple.

Comment faire ?

J'ai essayer ceci :
<img src="blabla.jpg" height="50%" width="50%">

mais l'image fait alors 50% de hauteur et de largeur de la page !

Faut il utiliser les propriétés des CSS ?
Afficher la suite 

2 réponses

Meilleure réponse
approuvée par Jean-François Pillou le 5 déc. 2018
127
Merci
<img src="ton_image.JPG" height="352" width="470" >

jai mis ce lien et il marche parfaitement, donc je ne vois pas ou est le probleme... dsl

Dire « Merci » 127

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 40987 internautes nous ont dit merci ce mois-ci

sebsauvage
Messages postés
33261
Date d'inscription
mercredi 29 août 2001
Statut
Modérateur
Dernière intervention
26 mars 2015
9793 -
Et tes valeurs 352 et 470, tu les as sorties d'où ? De l'image ?
Donc il a fallu lire l'image, puis générer le code HTML correspondant.

Là il voulait que le code HTML affiche automatiquement les images à 50% de leur taille d'origine, ce qui n'est pas possible en HTML seul: il faut impérativement lire les dimensions de l'image pour mettre les bonnes valeurs dans width et height.
Gloubinours91
Messages postés
364
Date d'inscription
mercredi 9 juillet 2008
Statut
Membre
Dernière intervention
22 septembre 2016
126 -
Hello,

@ ouafff9 : Je confirme que cela marche, je viens de l'utiliser.
Pour cedont tu parles "gro", je suppose que tu veux que toutes tes images apparaissent à la même taille? Les réduire de 50% chacune impliquent donc qu'elles soient toutes à la même taille à la base, jusqu'ici on est d'accord?
Donc: Place ta balise <img src="ton_image.JPG" height="x" width="x" >
et remplace les "x" par une valeur qui te convient, et qui sera par conséquent universelle à toute tes images!

Et si tes images ne font pas la même taille à la base, tu fais du handmade! (Du travail à la main, Càd tu étudies la taille de chaque image et tu trouves sa taille réduite optimale)

Héé oui c'est chiant de faire un beau truc! =P
Aller bonne chance ;)

Gloubi.
yggdrasoli
Messages postés
160
Date d'inscription
jeudi 24 novembre 2011
Statut
Membre
Dernière intervention
15 janvier 2018
10 -
Si j'ai envie d'agrandir une image (thumbnail) posté sur un forum il suffit que je fasse ça ?
<img src="blabla.jpg" height="200%" width="200%">:
Merci de m'avoir donné cet coup de main, sa échappait...
Merci beaucoup cela marche parfaitement bien!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!<ital></ital>
Messages postés
33261
Date d'inscription
mercredi 29 août 2001
Statut
Modérateur
Dernière intervention
26 mars 2015
9793
6
Merci
a ma connaissance, ce n'est pas possible.
Ou alors il faut lire les propriétés de l'image et générer le code HTML à la volée.

Autre solution: utiliser un programme qui va vous générer automatiquement une gallerie de miniatures, comme l'excellent (et gratuit) XNView.
http://www.xnview.com
si! c'est possible!!!!

tu mets ton image dans un DIV. La div, tu la dimensionnes comme tu veux. Et l'image tu la définies comme suit:

<div width="lavaleurquetusouhaites" height="lavaleurquetusouhaites"><img src="blabla.jpg" width:"100%" height:100% /></div>

VIve les valeurs relative!!!!!!!!
Attends, je t'aie introduit une jolie erreur. Voici la version corrigée:

<div width="lavaleurquetusouhaites" height="lavaleurquetusouhaites"><img src="blabla.jpg" width="100%" height="100%" /></div>
Perceval l'Hylien
Messages postés
535
Date d'inscription
samedi 1 janvier 2005
Statut
Membre
Dernière intervention
25 janvier 2012
180 -
Excellente idée Isa, les DIV fonctionnent impeccable, je n'y avais pas pensé !
Cette solution est l'idéale quand on ne peut pas utiliser le CSS (mon cas, génération de newsletter), qu'on ne veut pas créer un gros script PHP (compatible GD...) qui lui-même crée de nouvelles images, ou éviter les horribles balises HTML de base (hélas trop imparfaites !).
Merci beaucoup !
Pour ma part j'utilise ce code :

<a href="Image/img.jpg" target="_blank"><title>Nom de l'image</title><img src="Image/tn_img.jpg" alt="nom" title="nom" /></a>

Ce qui permet d'afficher l'image tn_img.png ( qui est une image réduite ( Thumbnail)) sur la page et lorsqu'on clique dessus cela ouvre l'image en taille réelle dans un nouvel onglet
( target="_blank" )