Discussion :

[ghohm]

Bonjour,

je dois récupérer les dimensions d'un élément <div>, lequel contient une balise <img>.

En effet, je voudrais que mon image fasse "hauteur du <div> moins 1%" par "largeur du <div> moins 1%". Sauf si les dimensions de l'image sont inférieures à celle du <div>, auquel cas les attributs "height" et "width" seraient à "100%" dans <img>.

Peut-être serait-ce plus facile si mes <div> avaient des "id" ?

Je dois bien avouer que je n'y connais rien en JS, mais je dois l'utiliser pour tester mon appli !

Merci d'avance,
Gôm.

[SpaceFrog]

Code :

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

bj.parentNode.offsetHeight

?

[FremyCompany]

Code :

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

1
2
3
shape=function(x,y,h,w) { this.x=x; this.h=h; this.y=y; this.w=w; }
var p=h.parentNode;
var s=new shape(p.offsetX, p.offsetY, p.offsetHeight, p.offsetWidth);

[ghohm]

Bonjour,

pourriez-vous commenter un peu votre code, parce que là j'ai peur de pas tout comprendre !

[SpaceFrog]

lequel ???

je t'ai juste donné laccès à la propriété offsetHeight du node parent ...

Code :

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

Objet.parentNode.offsetHeight

Objet étant l'image... àpriori le parentNode sera le div contenant
et son offsetHeight te retourna sa hauteur ...

[ghohm]

De plus, j'aimerais que le redimensionnement de mon image se fasse au chargement de ma page, sans que le visiteur n'ait rien à faire.

Il faudrait que ce soit totalement tranparent pour lui.

Est-ce possible ?

[SpaceFrog]

oui c'est possible en lmançant une fonction dasn le onload du body
question subsidiaire ton div est bien en overflow hidden ?

[ghohm]

oui c'est possible en lmançant une fonction dasn le onload du body
question subsidiaire ton div est bien en overflow hidden ?

Non, pourquoi ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background-color: #fff;
}
.global {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1000px;
	height: 730px;
	margin-top: -365px;
	margin-left: -500px;
}
 
.centre {
	position: absolute;
	width: 990px;
	height: 720px;
	padding: 5px;
	background-color: #FFFFE6;
	border: 2px solid #000000;
}
	.zone1 {
		float: left;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
	}
	.zone2 {
		float: right;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
	}
	.zone3 {
		position: absolute;
		left: 5px;
		bottom: 5px;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
	}
	.zone4 {
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
	}
 
#media {
	position: relative;
	left: 50%;
	top: 50%;
	width: 470px;
	height: 340px;
	margin-top: -170px;
	margin-left: -385px;
}