Ecrire du texte par dessus une image responsive sans que le texte ne déborde.

**aristim** · 29/11/2020, 21h43

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** · 29/11/2020, 22h54

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** · 29/11/2020, 23h24

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** · 30/11/2020, 12h57

Bonjour,

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

**arnofly** · 30/11/2020, 16h06

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** · 30/11/2020, 18h56

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?

**arnofly** · 30/11/2020, 20h09

Je vois pas d'autre solution.

Les dimensions de tes images sont variables, mais ta page a bien une largeur maximale qui doit tourner autour des 1200 pixels sur un écran d'ordinateur, non ? Et puis tes images, même si elles ont des dimensions variables à la base, rien ne t'empêche de les redimensionner en imposant une taille maxi. Sauf cas d'un site de galerie de photos type pixabay.com, il faut éviter de dépasser une certaine taille pour les images afin d'optimiser le temps de chargement de la page. Pour un écran d'oridinateur 1200 pixels de large me semble un maximum, et pour un smartphone, je dirais que quelque chose comme 340 ou 420 pixels c'est bien.

Le plus emmerdant, c'est si tu as des images en mode portrait et d'autres en mode paysage. Dans ce cas tu vas être obliger d'utiliser JavaScript ou de t'imposer la règle de n'utiliser qu'un type d'orientation (paysage ou portrait). Si jamais, sans utiliser JavaScript, tu as encore la solution d'ajouter des bords noirs à tes images en mode portrait pour en faire des images en mode paysage, mais il va falloir passer par un logiciel comme Photoshop ou Affinity Photo pour citer les meilleurs. L'équivalent gratuit et Oepn Source etant Gimp qui serait largement suffisant pour faire ce job.

**aristim** · 30/11/2020, 22h28

Merci pour votre aide.
Du coup, j'ai fait un petit scirpt js pour récupérer la largeur de l'image afin de définir des marges.
Ca fonctionne bien.

Je laisse le topic qq jours pour voir si qq trouve une solution sans js.

Voici le code

Code JavaScript :

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
/* VARIABLES DE MISE EN FORME*/
	var prop = 0.93; /* proportion du div parentevt */
        var L = prop * window.innerWidth;
	var H = prop * window.innerHeight;
	var l = monimage.width;
	var h = monimage.height;
 
        var largeur = larImg(L, H, l, h);
	var marge = (L - largeur)/2;
	evtpe.style.left = marge;
	evtpe.style.right = marge;
	legpe.style.left = marge;
	legpe.style.right = marge;
 
/* FONCTION RETOURNANT LA LARGEUR DE L'IMAGE RESPONSIVE DANS SON DIV*/
function larImg(L, H, l, h) {
 
	if ((l < L) && (h < H)) {return l;}
	else {
		if (L/H > l/h) {return H*l/h;}
		else{return L;}
	}
 
}

**arnofly** · 30/11/2020, 23h56

JavaScript toujours là pour sauver la mise

En tous cas, la démarche est bonne d'essayer en premier lieu d'arriver à ses fins uniquement en CSS et c'est sympa de ta part de poster ta solution.

**johanpetrikovsky** · 01/12/2020, 07h08

Et oui hélas on ne peut pas échapper au JS parfois

**NoSmoking** · 01/12/2020, 15h20

Bonjour,

Envoyé par aristim

Je voudrais que mon texte (div legpe) s'inscrive sur l'image en bottom-left

Et si le texte est plus large que l’image le rendu risque de ne pas être super.

Envoyé par arnofly

De même que par convention, on utilise pas les identifiants pour styliser le code, mais les classes.

Je ne parlerais pas de convention mais plutôt de besoin.

Sélecteur de class quand :

Le style est utilisé à différents endroits du document ;
Le style est général, plus d'un élément partage le même style.

Sélecteur d’ID (unique dans un document) quand :

Le style n'est utilisé qu'une seule fois dans le document ;
Le style est spécifique à une certaine zone du document.

De plus il se peut que l'on ait besoin de forcer le « poids du sélecteur » :

Code :

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

1
2
3
4
#item.nom-class {  /* spécificité 1-1-0 */
}
.nom-class {       /* spécificité 0-1-0 */
}

Envoyé par aristim

Je laisse le topic qq jours pour voir si qq trouve une solution sans js.

Envoyé par johanpetrikovsky

Et oui hélas on ne peut pas échapper au JS parfois

Je crois que cette fois ci on peut encore s'en passer !

Une solution consiste à utiliser le mode de rendu flex.

Pour centrer verticalement et horizontalement il existe depuis l'avènement des « flexBox » ce mode de rendu bien pratique, il suffit de l'utiliser ici pour centrer l'élément <figure>.

Sur base de la structure HTML suivante :

Code html :

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

1
2
3
4
5
6
<div class="row">
  <figure>
    <img src="nom-image" alt="">
    <figcaption>Description image</figcaption>
  </figure>
</div>

il y a moyen de center cela proprement.

Dans le cas qui nous intéresse chaque .row fera la hauteur de la fenêtre en centrant son contenu, la <figure> en l’occurrence.

Code :

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

1
2
3
4
5
6
7
.row {
  display: flex;
  align-content: center;
  align-items: center;
  height: 100vh;
  max-height: 100vh;
}

avec pour l'élémeent <figure> :

Code :

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

1
2
3
4
figure {
  position: relative;       /* pour servir de référent */
  margin: auto;             /* pour centrage auto */
}

pour les <img> :

Code :

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

1
2
3
4
5
img {
  display: block;
  max-height: 100vh;        /* IMPORTANT à définir correctement */
  max-width: 100%;
}

il est important de définir la hauteur autrement q''en % car on n'a pas défini de hauteur à l'élément parent <figure>.

Avec tout cela le <figcation> peut $être positionné par rapport à son parent

Code :

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

1
2
3
4
5
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
}

Le code de test, peine enjolivé :

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
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrage image avec légende</title>
<meta name="Author" content="NoSmoking">
<meta name="description" content="Centrage image dans la fenêtre d'affichage, en respectant le ratio largeur/hauter, avec légende en bas à gauche.">
<meta name="DVP-discussion" content="d2097247">
<style>
html,body{margin:0;padding:0;font:1em/1.5 Verdana,sans-serif}
h1,h2,h3{margin:.25em 0;color:#006699}
main{display:block;margin:auto;padding:1px 1em;max-width:60em;background-color:rgba(255,255,255,.6)}
section p{margin:auto 1em 2em;text-align:justify}
time{float:right;margin:.5em;font-size:.9em;color:#888888}
footer p{padding:.5em;background:#FFF;}
body {
  margin: auto;
  max-width: 97vw;
}
.row {
  --max-height-image: 100vh;
 
  display: flex;
  align-content: center;
  align-items: center;
  box-sizing: border-box;
  /*height: 100vh;                  /* pour IE si besoin */
  height: var(--max-height-image);
  margin-bottom: 1em;
  max-height: var(--max-height-image);
  border: 1px solid #CCC;
  overflow: hidden;
}
figure {
  position: relative;
  margin: auto;
}
img {
  display: block;
  /*max-height: 100vh;              /* pour IE si besoin */
  max-height:var(--max-height-image);
  max-width: 100%;
}
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .5em;
  min-width: 50%;
  border: 1px solid #CCC;
  font-size: .8em;
  background: rgba(255,255,255,.8);
}
</style>
</head>
<body>
  <header>
    <time datetime="2020-12-01">Déc. 2020</time>
    <h1>Centrage image avec légende</h1>
  </header>
  <section id="cadre-img">
    <p>Cliquez sur les images pour les afficher pleine fenêtre et redimensionner la fenêtre du navigateur pour voir le redimensionnement opérer.
    <div class="row">
      <figure>
        <img src="https://dummyimage.com/1200x400/069/ffffff" alt="">
            <figcaption>Image 1200 x 400</figcaption>
      </figure>
    </div>
    <div class="row">
      <figure>
      <img src="https://dummyimage.com/400x1200/069/ffffff" alt="">
      <figcaption>Image 400 x 1200</figcaption>
    </figure>
    </div>
    <div class="row">
    <figure>
      <img src="https://dummyimage.com/600x480/069/ffffff" alt="">
      <figcaption>Image 600 x 480</figcaption>
    </figure>
    </div>
    <div class="row">
    <figure>
      <img  src="https://dummyimage.com/480x600/069/ffffff" alt="">
      <figcaption>Image 480 x 600</figcaption>
    </figure>
    </div>
  </section>
  <footer>
    <p>Voir la <a href="https://www.developpez.net/forums/showthread.php?t=2097247">discussion sur Developpez.com</a>
  </footer>
<script>
const elements = document.querySelectorAll(".row");
elements.forEach((el) => {
  el.addEventListener("click", (e) => {
    el.scrollIntoView({
      behavior: "smooth"
    });
  });
});</script>
</body>
</html>

Fichier en ligne : Centrage image avec légende.

Nota : Cliquez sur les images, merci JavaScript, pour les afficher pleine fenêtre et redimensionner la fenêtre du navigateur pour voir le redimensionnement opérer.

**arnofly** · 01/12/2020, 18h40

Envoyé par NoSmoking

Je ne parlerais pas de convention mais plutôt de besoin.

Sélecteur de class quand :

Le style est utilisé à différents endroits du document ;
Le style est général, plus d'un élément partage le même style.

Sélecteur d’ID (unique dans un document) quand :

Le style n'est utilisé qu'une seule fois dans le document ;
Le style est spécifique à une certaine zone du document.

De plus il se peut que l'on ait besoin de forcer le « poids du sélecteur » :

Code :

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

1
2
3
4
#item.nom-class {  /* spécificité 1-1-0 */
}
.nom-class {       /* spécificité 0-1-0 */
}

En fait, en théorie tu as raison, mais dans la pratique si tu respectes la méthodologie BEM (ce que je recommande), il est clairement indiqué qu'il ne faut pas utiliser les ID.

Nom : Capture d’écran 2020-12-01 182544.png
Affichages : 1740
Taille : 12,7 Ko

Nom : Capture d’écran 2020-12-01 182544.png
Affichages : 1740
Taille : 12,7 Ko

Alors évidement il serait bête d'appliquer la règle à la lettre et de bannir les ID, mais depuis que j'ai pris l'habitude de suivre les recommandations de la méthodologie BEM mon code s'en porte mieux. Du coup, quand je croise un ID dans mon code HTML, je suis à peut prêt sûr que celui-ci est lié à un code JS. Comme en plus je prends l'habitude de préfixer d'un "js" tous mes id en lien avec du code JavaScript, y'a plus trop de doute

D'un autre côté, quand tu souhaites styliser un élément qui doit être unique dans ton code, l'usage d'un ID peut être judicieux. Comme on sait qu'un ID doit être unique, son usage a aussi un rôle mnémotechnique.

Sinon, belle démonstration de l'usage de Flex qui est vraiment une belle avancée en CSS.

**aristim** · 04/12/2020, 22h45

Merci No smoking pour ta réponse. J'ai l'impression que ca va le faire effectivement avec ce que tu proposes. Merci pour la page d'exemple. Le flex est magique! Mais sacrément compliqué lorsqu'on maîtrise pas super bien le CSS.
Je considère le sujet résolu et remercie tous les contributeurs.

Ecrire du texte par dessus une image responsive sans que le texte ne déborde.

Responsive design en CSS

Discussions similaires

Partager

Partager