Sujet Précédent Sujet Suivant

Adapter la taille d'une image dans un diaporama html/css

Résolu/Fermé
LalouGame Messages postés 2 Date d'inscription dimanche 24 juillet 2016 Statut Membre Dernière intervention 10 mars 2020 - Modifié le 10 mars 2020 à 15:14
LalouGame Messages postés 2 Date d'inscription dimanche 24 juillet 2016 Statut Membre Dernière intervention 10 mars 2020 - 10 mars 2020 à 18:28
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"); }
}
A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
10 mars 2020 à 15:09
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,
1
LalouGame Messages postés 2 Date d'inscription dimanche 24 juillet 2016 Statut Membre Dernière intervention 10 mars 2020
Modifié le 10 mars 2020 à 18:28
J'ai testé et ça a très bien marché avec la deuxième options, merci beaucoup

Bonne journée à toi aussi ;-)
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
À quoi correspond 32x32 US en taille française pour un jean ?
Alison1958 -
Thordendall -

1 réponse
W32 L32: correspondance entre taille US et taille française
efg -
sibel -

6 réponses