Discussion :

[aristim]

Bonjour à tous

Je voudrais que mon texte (div legpe) s'inscrive sur l'image en bottom-left.
Or l'image est responsive et est centrée et sa largeur n'est donc pas forcément la même que le div qui la contient (div imgpe).
Mon problème est que le texte s'aligne à gauche sur le div.

J'ai beaucoup cherché sur la toile sans trouver.
Merci de vos lumières.

Je vous joins mon code html et css

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="cadrepe">
 
	<div class="parentevt">
 
		<div id="imgpe">
 
				<img id="img_pleine" src="images/grande.jpg">
 
				<div id="legpe">
					Texte de la légende: Le problème est que ce texte ne commence pas sur le bord gauche de l'image mais sur le bord gauche du cadre div imgpe. Or l'image étant responsive, je ne sais pas comment faire.
				</div>
 
		</div>
	</div>
</div>

et le css

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
#cadrepe {
	position: fixed;
	top:0;
	left:0;
	margin: auto;
	height: 100%;
	width: 100%; 
	display: flex;
}
.parentevt {
	width: 88%;
	height: 88%;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;	
}
#imgpe {
	position: relative;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
}
#img_pleine {
	max-width: 100%;
	max-height: 100%;
	cursor: pointer;
	margin: auto;
}
#legpe {
	position: absolute;
	bottom: 8px;
}

[arnofly]

Slt,

Pour résoudre ton problème, il faut que tu imposes une largeur au conteneur de ton image en pixels et non pas en pourcentages, en prenant garde de donner au conteneur comme longueur maximale, la longueur maximale de ton image.

Si ton image fait 960 pixels de long, alors le conteneur de cette image ne doit pas pouvoir faire plus de 960 pixels de long.

En reprenant ton code CSS ça donne ça :

Code :

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

1
2
3
4
5
 
.parentevt {
    /* width: 88%; */
    max-width: 960px;
}

[aristim]

Salut Arnolfy
Merci de ta réponse.
Mais en fait je ne peux pas faire comme cela car le script servira pour une série d'images dont les dimensions sont variables.
Une autre idée? (en évitant de passer par javascript).

[javatwister]

Bonjour,

As-tu essayé le duo <figure> et <figcaption> , pour avoir une vraie légende d'image?

[arnofly]

Tu as raison, mais ça ne change pas son problème. Je ne voulais pas le noyer De même que par convention, on utilise pas les identifiants pour styliser le code, mais les classes.

[aristim]

Merci javawister.
Je ne connaissais pas figure et figcaption. Ca simplifiera le code.
Cependant, comme le dit Arnolfy, le problème n'est pas solutionné car le div contenant reste potentiollement plus large que l'image.

Et merci Arnolfy pour la précision de convention. J'y ferai attention.

Un autre idée? Est-ce seulement possible sans utiliser javascript pour récupérer la largeur de l'image?