Ajuster mes images dans mon diaporama

**awalter1** · 12/02/2023, 20h45

Bonjour,

J'ai un code qui me permet d'afficher des images dans un diaporama avec un enchainement automatique. Mes images ont des tailles différentes, et des proportions différentes. Cas classique.
Le diaporama fonctionne correctement.
Mais je ne parviens pas à ce que chaque image soit entièrement affichée dans mon container, avec les bonnes proportions et que l'espace restant soit dans une couleur de fond à définir. Il me semblait que background-size faisait le travail, mais non: mon image est répétée dans le container pour les parties non couvertes.
Je sens que je ne suis pas loin, mais je tourne en rond.
Merci de votre aide.

Voici mon

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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=""UTF-8">
    <title>Gallerie Alain Walter</title>
    <link rel="shortcut icon" href="logo.png" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Gallerie Alain Walter</h1>
    <div class="diaporama1">
    </div>
  </body>
</html>

Et mon code 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
34
35
36
37
body{
    margin: 0px;
    padding: 0px;
    width: 80%;
}
 
.diaporama1{
     margin: 0 auto;
     width: 650px;
     height: 600px;
     border: 3px solid #333;
     background-image: url("images/bouquet.jpg");
     background-size: contain;
     background-color: black;
 
     animation-name: diapo1;
     animation-duration: 9s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-direction: normal;
}
 
@-webkit-keyframes diapo1{
    0%{background-image: url("images/bouquet.jpg");}
    33%{background-image: url("images/cabourg.jpg");}
    66%{background-image: url("images/cardio.jpg");}
}
@-moz-keyframes diapo1{
    0%{background-image: url("images/bouquet.jpg");}
    33%{background-image: url("images/cabourg.jpg");}
    66%{background-image: url("images/cardio.jpg");}
}
@keyframes diapo1{
    0%{background-image: url("images/bouquet.jpg");}
    33%{background-image: url("images/cabourg.jpg");}
    66%{background-image: url("images/cardio.jpg");}
}

**mathieu** · 12/02/2023, 21h23

pouvez vous mettre en pièces jointes 3 images aux tailles que vous utilisez pour qu'on puisse tester ?

**mathieu** · 12/02/2023, 21h37

j'ai fait des tests avec mes images et j'ai l'impression de m'approcher de votre but en ajoutant le code suivant :

Code css :

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

1
2
3
4
5
6
.diaporama1
{
	background-repeat : no-repeat;
	background-position : center;
 
}

**awalter1** · 13/02/2023, 09h33

Bonjour,
C'est exactement ça : c'est le no-repeat qui manquait!

Merci beaucoup.

Ajuster mes images dans mon diaporama

CSS

Discussions similaires

Partager

Partager