CSS et diaporama

Bonjour,

J'essaie de mettre en place un diaporama sur mon site mais je me heurte à des problèmes de cadrage des images.

Les photos dont je dispose proviennes de plusieurs source et sont au format : 1024 x 576, 1024 x 768, 1024 x 683

Les images sont redimensionnées en 576 x 324. Pour certaines j'ai forcé le format en ne respectant pas le rapport hauteur largeur pour avoir le même format.

ci-dessous le code css

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.diaporama2 { position:absolute; margin-top: 70px; width:750px; height: 422px;   margin-left: 200px; margin-right: 10 auto; border: 3px solid #333; background-size: contain; webkit-animation-name: diapo1; webkit-animation-duration: 9s; webkit-animation-timing-function: linear; webkit-animation-iteration-count: infinite; webkit-animation-direction: normal;

---

Les images recadrées sans respecter le rapport largueur-hauteur s'affiche en entier plus le début pour compléter le cadre, les autres s'affichent correctement.

Je ne sais pas comment résoudre ce problème,

Merci de votre aide,

Cordialement

Bonjour,

et tu penses vraiment qu'on peut te répondre avec juste ton bout de code CSS ? :weird:

Bonjour,

J'avoue que c'est un peu compliqué de répondre avec juste le CSS, surtout que l'explication de ton problème ne me semble pas très clair.

Toujours est-il que je vois background-size: contain;, si le but est d'avoir une image de fond qui prenne l'ensemble de ton block, cela ne devrait-il pas être background-size: cover; ?
Si ce n'est pas le cas, je pense que ce que tu essayes d'expliquer est que le background se répète. Il faudra alors ajouter background-repeat: no-repeat; background-position: center center;