Dimension maximale d'images

**trepidelhia** · 01/01/2016, 16h17

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é.

**laurentSc** · 02/01/2016, 19h51

Bonjour,

faire du PHP en local, c'est possible en installant un serveur local style wampserver ou easyphp. Cela dit, je ferais cela avec uniquement du javascript :
1- lire les dimensions de la fenêtre ;
2- les comparer aux dimensions de chaque image ;
3- retenir les dimensions les plus grandes possibles ;
4- pour chaque image calculer la nouvelle longueur et appliquer cette longueur à l'image (la hauteur s'adaptera tout en respectant le ratio initial)

**miss_socrates** · 08/01/2016, 22h24

Il faut attribuer une classe aux photos plus large que hautes et une classe pour les photos plus hautes.
Par ex. si les photos 1 et 2 sont plus larges que hautes et la photo 3 est plus haute que large:

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
21
22
23
24
25
26
27
28
29
30
31
 
<html>
<head>
<script language="JavaScript">
<!--
  i=0;
  function affiche(numero)
  {
    i=(numero+3)%3;
    if(i==0) id='pic1.jpg' class="photo_large";
    if(i==1) id='pic2.jpg' class="photo_large";
    if(i==2) id='pic3.jpg' class="photo_haute";
    img.src=id;
  }
// -->
</script>
<style>
.photo_large{
width: 100 %;
height: auto;
}
.photo_haute{
height: 100 %;
width: auto;
}
</style>
</head>
<body onClick="affiche(i+1)">
  <img name="img" src="pic1.jpg" style="max-width: 100%; height: auto" />
</body>
</html>

**NoSmoking** · 09/01/2016, 13h08

Bonjour,
on peut simplement utiliser max-width associé à max-height.

Html :

Code html :

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

1
2
3
<img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_cours_devweb.gif" alt="80 x 80 pixels">
<img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_cours_web.gif" alt="400 x 173 pixels">
<img src="http://cyberzoide.developpez.com/misc/background03-800x600.jpg" alt="800 x 600 pixels">

Css :

Code :

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

1
2
3
4
5
6
7
img {
  display:block;
  max-width:200px;
  max-height:150px;
  margin:1em auto;
  border:1px solid #88f;
}

PS : j'ai de gros doutes sur le code javascript !

Invité · 09/01/2016, 17h32

Bonjour,

on peut utiliser mx-height:100%; mais il faut définir aussi la hauteur du body :

Code html :

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

1
2
3
<body onload="affiche(0);" onclick="affiche(i+1);">
  <img name="img" src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg" />
</body>

Code css :

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

1
2
3
4
5
6
7
8
9
html,body { 
  width:100%; height:100%; margin:0; padding:0; }
img { margin:0; padding:0; 
  display:block;
  max-width:100%;
  max-height:100%;
  margin:0 auto;
  border:1px solid #88f;
}

Code javascript :

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

1
2
3
4
5
6
7
8
9
 
var i = 0;
function affiche(numero) {
  i = numero % 3;
  if (i == 0) id = 'http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg';
  if (i == 1) id = 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Empire_State_Building_from_the_Top_of_the_Rock.jpg';
  if (i == 2) id = 'http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-lg-g3-1440-2560-quad-hd-awesome/z-wallpaper-lg-g3-cubes-abstract-1440-2560-241.jpg';
  img.src = id;
}

N.B. pour info, (numero+3)%3 = numero%3, puisque 3%3=0 !

[EDIT] Une autre façon d'écrire le JavaScript :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var i = 0;
 
var urls = [
  'http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg', 
  'https://upload.wikimedia.org/wikipedia/commons/c/c7/Empire_State_Building_from_the_Top_of_the_Rock.jpg', 
  'http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-lg-g3-1440-2560-quad-hd-awesome/z-wallpaper-lg-g3-cubes-abstract-1440-2560-241.jpg'
];
var nbre_urls = urls.length;
 
function affiche(numero) {
  i = numero % nbre_urls;
  img.src = urls[i];
}

Du coup, on peut ajouter autant d'images qu'on veut dans l'array urls => http://codepen.io/jreaux62/pen/ZQKqLx

Dimension maximale d'images

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager