Discussion :

[Elztx]

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 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
<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 :

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
.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 :



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



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

[Invité]

...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 :

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

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 :

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

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>.

[Elztx]

Hello,

Oups, en effet
Merci aha,

Bonne journée à toi