Alignement figcaption sur img

2 pièce(s) jointe(s)

Bonjour,
J'ai un diaporama JS sur ma page web. Celui-ci est dans un div flex avec des boutons en dessous. Le diapo en lui-même est composé d'une div contenant une figure (avec une image) et une balise figcaption.
L'image ne prend pas la totalité de la figure mais est centrée dans cette dernière. Pour des soucis de responsive, je souhaite donc que la légende comprise dans figcaption s'adapte à l'image et non à la figure. Comment pourrais-je procéder ?

Voici la structure HTML de la section :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id ="diapo_contenair">
 
            <div class="slider" id="main-slider">
                <figure id="slide">
                        <img id="diapo">
                        <figcaption id="legende"></figcaption>
                </figure>
            </div>
 
            <div class="bouttons">
                 <button id="fleche_g" type="button">
                     <i class="fas fa-chevron-circle-left" id="flechegauche"></i>
                </button>
                <button id="play" type="button">
                    <img src="images/buttonplaypause.png" id="playpause">
                </button>
                <button id="fleche_d" type="button">
                    <i class="fas fa-chevron-circle-right" id="flechedroite"></i>
                </button>
            </div>
 
        </div>

Et voici le CSS associé :

Code:

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
.bouttons{
    text-align: center;
}
#flechegauche, #flechedroite{
    font-size: 50px;
}
 
#diapo_contenair{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    justify-content: space-between;
    text-align: center;
}
 
#fleche_g, #play, #fleche_d{
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
}
 
#slide{
    text-align: center;
}
 
#diapo{
    width: 71%;
}
 
.slider {
	height: 350px;
    text-align: center;
}
 
#legende{
    position: absolute;
    top: 55%; left: 50%; 
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 4vh;
    font-weight: 600;
    padding: 10px;
    width: 65%;
    margin: 0;
    text-align: center;
}

Et donc le résultat :

Pièce jointe 465207

Et le problème avec un exemple en réduisant la page :

Pièce jointe 465211

J'ai d'ailleurs un souci d'alignement des boutons avec les icônes fontawesome et le bouton image (car je n'ai pas trouvé d'équivalent fontawesome), si quelqu'un a une piste..

Merci :)

Citation:

Envoyé par Elztx

...L'image ne prend pas la totalité de la figure mais est centrée dans cette dernière....

1- Il faut faire le contraire :
c'est la <figure> qui ne prend pas toutes la largeur, mais s'adapte à la largeur de l'image.
Ainsi, le <figcatpion> aura la m^me largeur que l'image.
Code:

1 2 3 4 5 6 7 8 .slider { text-align:center; } .slider > figure { position: relative; display:inline-block; margin:0 auto; }
2- Pour l'alignement des boutons :
Code:

1 2 3 4 5 .bouttons { display:flex; justify-content:center; align-items:center; }
Sinon, il y a aussi <i class="fas fa-play"></i>.

Hello,

Oups, en effet 8O
Merci aha,

Bonne journée à toi :D