Redimensionner image à l'affichage
Résolu
Archeus01
Messages postés
1572
Date d'inscription
Statut
Membre
Dernière intervention
-
airGuillaume - 9 déc. 2010 à 13:31
airGuillaume - 9 déc. 2010 à 13:31
A voir également:
- Redimensionner image à l'affichage
- Image iso - Guide
- Affichage double ecran - Guide
- Acronis true image - Télécharger - Sauvegarde
- Windows 11 affichage classique - Guide
- Légender une image - Guide
1 réponse
Salut,
css dans sa version actuelle (2.1) ne permet pas de faire ça. En revanche, rien de plus simple dans un langage de script comme PHP ou JavaScript ! Il suffit de multiplier les deux coordonnées de l'image par un même nombre lambda (c'est une homothétie).
Si lambda > 1, c'est un agrandissement ;
si lambda < 1, c'est une réduction.
Et si lambda < 0 … syntax error :P
Pour faire une modification "en direct", pas le choix : c'est JavaScript. Tu récupères ton image avec une des célèbres méthodes getElement, puis tu peux jouer soit sur ses attributs css style.height et style.width, soit plus simplement en profitant des propriétés offertes par l'interface HTMLImageElement (réf. ici), height et width.
À partir de là, la plus simple des fonctions envisageables est, à mes yeux, celle qui prend l'image elle-même en paramètre :
;)
css dans sa version actuelle (2.1) ne permet pas de faire ça. En revanche, rien de plus simple dans un langage de script comme PHP ou JavaScript ! Il suffit de multiplier les deux coordonnées de l'image par un même nombre lambda (c'est une homothétie).
Si lambda > 1, c'est un agrandissement ;
si lambda < 1, c'est une réduction.
Et si lambda < 0 … syntax error :P
Pour faire une modification "en direct", pas le choix : c'est JavaScript. Tu récupères ton image avec une des célèbres méthodes getElement, puis tu peux jouer soit sur ses attributs css style.height et style.width, soit plus simplement en profitant des propriétés offertes par l'interface HTMLImageElement (réf. ici), height et width.
À partir de là, la plus simple des fonctions envisageables est, à mes yeux, celle qui prend l'image elle-même en paramètre :
function redim(img, lambda) {
img.width *= lambda;
img.height *= lambda;
}
;)
1195px × 962px (redimensionnée en 248px × 200px)... Je ne sais pas pourquoi à vrai dire, je l'ai juste placé à gauche d'un div qui fait 250 px en hauteur... Enfin bon, du coup, ça me l'a redimensionné tout seul et c'est pas plus mal.
Cdt, Archeus
Lors du redimensionnement avec javascript, tu charges l'images complète (donc en taille 1195px × 962px) puis javascript se charge de l'afficher en petite. (ce n'est pas une "vraie" redimension à proprement parler.