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 ;-)