Discussion :

[sebac]

Bonjour, j'ai une zone d'affichage d'image dont voici le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img style="z-index:1; position:relative; "  src='dicom.php?quality=100' id='image' >

et je parvient à avoir la taille de cette zone via

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var height=document.getElementById('image').offsetHeight;//hauteur de l'élément à positionner
var width=document.getElementById('image').offsetWidth;//largeur de l'élément à positionner

et je connais également la hauteur et la largeur originel de mon image, que j'ai mis dans les variables nommées: haut et larg. Je veux que mes images lors de l'affiche dans la zone d'affichage, ne soient pas déformées. Exemple de cas: mon image d'origine est carré donc haut==larg avec haut>height et larg>width je veux que mon image s'affiche dans ma zone d'affichage sans être déformée, de sorte qu'elle reste un carré. J'ai cru comprendre qu'il me faut calculer un rapport entre la taille de la zone d'affichage de l'image et l'image pour le faire mais je ne vois pas du tout comment. Il y'a encore d'autre cas, ente autre la hauteur de l'image d'origine est plus grande que celle de la zone d'affichage et la largeur non etc... En gros je ne veux pas que mon image se déforme lors des affichages.
Merci

[devyan]

Bonjour,

Pour qu'une image ne soit pas déformée lorsqu'on la redimensionne en HTML/CSS il suffit de ne renseigner qu'une des 2 dimensions (hauteur ou largeur)...

Donc dans ton cas il faut :
* identifier l'orientation de ton image (portrait = w<h, paysage = w>h)
* forcer la nouvelle valeur de cette dimension (portrait => h, paysage => w)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 Image "paysage"       Image "portrait"
-----------------     ------------------
|               |     |   **********   |
|***************|     |   **********   |
|***************|     |   **********   |
|***************|     |   **********   |
|***************|     |   **********   |
|***************|     |   **********   |
|               |     |   **********   |
-----------------     ------------------

devyan

[sebac]

si je ne comprend pas bien ce que tu veux dire par

forcer la nouvelle valeur de cette dimension (portrait => h, paysage => w)

Moi justement dans mon cas, on m'a parlé d'un certain ratio à maintenir. Apparement il faut que lorsque que mon image est redimensionnée, le rapport hauteurImageRedimentionné/largeurImageRedimentionné soit égal hauteurImageDorigine/largeurImageDorigine et c'est ce que je ne comprend pas

[Watilin]

Bonsoir,
c’est la règle de trois ! (argh, des maths…)

Le ratio d’une image, parfois appelé pixel ratio ou encore aspect ratio, est tout simplement le rapport largeur / hauteur.

Donc… largeur = ratio * hauteur, ou
hauteur = largeur / ratio.

Une image carrée a un ratio de 1. Pour les images rectangulaires :
- portrait : ratio < 1
- paysage : ratio > 1

Par exemple, un écran 4/3 a sa largeur égale à 4/3 * sa hauteur. Tu devrais déjà entrevoir la solution avec ça.

Mais comme dit devyan, si tu ne précises qu’une seule des deux dimensions de ton image, les navigateurs conservent le ratio, donc il suffirait de toujours modifier la hauteur et jamais la largeur, par exemple. Sinon… Nan, je ne te donne pas le code, ça serait trop facile. Avec tout ce qu’on t’a dit tu as toutes les pièces du puzzle.

[johannesb]

À vrai dire, je ne comprends pas ce que javascript vient faire là-dedans.
Donner à une image soit une hauteur donnée, soit une largeur donnée, en
respectant ses proportions, c'est une affaire simple de CSS, voire (si la
dimension voulue est en pixels) d'attributs width ou height de l'élément img.

Ou est-ce que j'ai mal compris le problème ?