Adapter la taille d'une image dans un diaporama html/css
Résolu
LalouGame
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
LalouGame Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
LalouGame Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
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é ) :
Mon code CSS :
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:
- Adapter une image à la taille de l'écran css
- Comment réduire la taille d'un fichier - Guide
- Reduire taille image - Guide
- Double ecran - Guide
- Ecran a l'envers - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
1 réponse
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,
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,
Bonne journée à toi aussi ;-)