Discussion :

[F6AAP]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

Bonjour,

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

[darkstar123456]

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;