Adapter la taille d'une image dans un diaporama html/css [Résolu]

Signaler
Messages postés
2
Date d'inscription
dimanche 24 juillet 2016
Statut
Membre
Dernière intervention
10 mars 2020
-
Messages postés
2
Date d'inscription
dimanche 24 juillet 2016
Statut
Membre
Dernière intervention
10 mars 2020
-
Bonjour je me présente je m'appelle Manon,

Voila je rencontre un petit soucis , en effet je créer un site web en langage html/css.

Le problème étant que mes images s'affiche bien dans le diaporama( défilement d'images automatiques) , la dimension du conteneur et également bonnes mais les images (non adapté au format du conteneur) son sois trop petits, sois trop grandes. Il y a donc sois plusieurs fois l'image ou on ne la vois pas entier .
Malgré la visite de nombreux sites , je n'ai pas trouvé la solution.

Si quelqu'un aurais la solution, par avance merci .????

Ci joint : Mon code HTML ( ciblé ) :

<html>
                       <body>


   <h1><i>Et si la musculation était la clé du bien être ?</i></h1>


   <br><br><br>

   <div class="diaporama1"></div>

   <br><br><br>

   </body>
</html>


Mon code CSS :

.diaporama1{
    margin: 0 auto;
    width: 600px;
    height: 500px;
    border: 3px solid #333;
    background-image: url("image1.jpg");
    margin-left: 150px;

    -webkit-animation-name: diapo1;
    -webkit-animation-duration: 9s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;

    animation-name: diaporama1;
    animation-duration: 13s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;

    {background-image: url("image1.jpg") width:100%; }
    {background-image: url("image2.jpg"); width: 100% ;}
    {background-image: url("image3.jpg"); width:100%;}
    {background-image: url("image4.jpg"); width: 100%;}
    {background-image: url("image5.jpg"); width: 100%;}


}

@-webkit-keyframes diaporama1 {


    0%{background-image: url("image1.jpg"); }
    33%{background-image: url("image2.jpg"); }
    66%{background-image: url("image3.jpg"); }
    90%{background-image: url("image4.jpg"); }
    90%{background-image: url("image5.jpg"); }

}

@-moz-keyframes-diaporama1{
    0%{background-image: url("image1.jpg") height 100%; }
    33%{background-image: url("image2.jpg"); }
    66%{background-image: url("image3.jpg"); }
    90%{background-image: url("image4.jpg"); }
    90%{background-image: url("image5.jpg"); }
}

1 réponse

Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
431
Salut,

Essaye d'ajouter la propriété background-size à ta classe .diaporama1 :
- soit avec la valeur contain pour que ton image s'affiche entièrement mais ne couvrira pas tout le cadre du diaporama. Dans ce cas ajouter aussi la propriété background-repeat: no-repeat; pour éviter que l'image se répète.
- soit avec la valeur cover pour que l'image couvre tout le cadre du diaporama quitte à être rognée sur les bords. Dans ce cas tu peux aussi ajouter background-position: center; pour centrer ton image dans le cadre.

Pour plus de détails :
https://developer.mozilla.org/fr/docs/Web/CSS/background-size
https://developer.mozilla.org/fr/docs/Web/CSS/background-repeat
https://developer.mozilla.org/fr/docs/Web/CSS/background-position

Bonne journée,
Messages postés
2
Date d'inscription
dimanche 24 juillet 2016
Statut
Membre
Dernière intervention
10 mars 2020

J'ai testé et ça a très bien marché avec la deuxième options, merci beaucoup

Bonne journée à toi aussi ;-)