Bonjour,

Je vous souhaite d'abord une très bonne année à tous.

Je programme une page en html/css qui affiche un diaporama de photos. Je voudrais que les images prennent le plus de place possible, mais en restant toujours dans le cadre de la fenêtre du navigateur et en gardant le ratio initial largeur/hauteur.

J'ai essayé des codes en HTML et en CSS, mais je n'ai pas trouvé, même en fouillant les forum pendant 2 heures ! Et je veux éviter le PHP, sachant que je lance ma page en local, donc sans serveur PHP.

Quelqu'un aurait-il une solution ?

Exemple de code :
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
18
19
20
<html>
<head>
<script language="JavaScript">
<!--
  i=0;
  function affiche(numero)
  {
    i=(numero+3)%3;
    if(i==0) id='pic1.jpg';
    if(i==1) id='pic2.jpg';
    if(i==2) id='pic3.jpg';
    img.src=id;
  }
// -->
</script>
</head>
<body onClick="affiche(i+1)">
  <img name="img" src="pic1.jpg" style="max-width: 100%; height: auto" />
</body>
</html>
Le code précédent fonctionne pour les images "pas très hautes", mais dès qu'elles sont trop hautes, le bas n'est pas affiché.