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

Signaler
-
 habitat -
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 ?

2 réponses

<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
176
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 84578 internautes nous ont dit merci ce mois-ci

Messages postés
32840
Date d'inscription
mercredi 29 août 2001
Statut
Modérateur
Dernière intervention
21 octobre 2019
15 148
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.
Messages postés
364
Date d'inscription
mercredi 9 juillet 2008
Statut
Membre
Dernière intervention
22 septembre 2016
133
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.
Messages postés
160
Date d'inscription
jeudi 24 novembre 2011
Statut
Membre
Dernière intervention
15 janvier 2018
25
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
32840
Date d'inscription
mercredi 29 août 2001
Statut
Modérateur
Dernière intervention
21 octobre 2019
15 148
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>
Messages postés
535
Date d'inscription
samedi 1 janvier 2005
Statut
Membre
Dernière intervention
25 janvier 2012
188
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" )