Ajuster les éléments de la page quand on reduit le navigateur

Version imprimable

24/10/2017, 21h23
RYMOOO

Ajuster les éléments de la page quand on reduit le navigateur

Bonsoir

En fait , j'ai 2 soucis , comment ajuster les éléments de la page quand on redimensionne la fenêtre(window) je viens de commencer à faire un script pour modifier les positions de tous les éléments quand on réduit le navigateur . par la suite j'ai constaté que ce n'est pas évident (j'ai autant d'images , des inputs ) je veux savoir s'il y a d'autres solutions mieux que celle-ci .
D'autre part , j'ai testé ma page sur plusieurs navigateurs , le gros soucis , chaque navigateur affiche différemment la page , par exemple Microsoft Edge n'affiche pas les images ?????? , Firefox n'affiche pas les éléments input ?????.

Merci d'avance
25/10/2017, 18h36
NoSmoking

Bonjour,
ce genre de situation, normalement, se gère très bien en CSS « responsive ». Malheureusement sans code HTML difficile de t'en dire plus.
25/10/2017, 22h15
RYMOOO

salut

Ce mot ça me dit rien , je regarde sur google .Merci de m avoir répondu . Bonne soirée .
25/10/2017, 22h37
ProgElecT

Salut

Un lien sur DVP Les fondamentaux du Responsive Web Design

Sinon, tu peux toujours positionner et dimensionner tous tes éléments en relatif par rapport à la surface utile du navigateur dans l'événement resize...
avec window.innerWidth et window.innerheight .

Par exemple, une div qui se redimensionne :

Code:

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
<!DOCTYPE html>
 
<html>
<head>
    <title>resize</title>
</head>
 
<body>
 <script>
    var w,h;
    var mydiv=document.createElement("div");
    mydiv.style.backgroundColor="#FF0000";
    document.body.appendChild(mydiv);
    mydiv.style.position="absolute";
    onResize();
    window.addEventListener("resize",onResize);
    
    function onResize(){
         w=window.innerWidth;  //Renvoie la largeur du contenu visible de la fenêtre
         h=window.innerHeight;  //Renvoie la hauteur de la partie visible de la fenêtre.
         mydiv.style.width=w/2+"px";// dimensions et position de la div en fonction des dimensions de la fenêtre
         mydiv.style.height=h/2+"px";//
         mydiv.style.left=w/4+"px";//
         mydiv.style.top=h/4+"px";//    
    }  
 </script>
</body>
</html>

Bonsoir,

A mon tour de prososer un bout de code! Il s'agit ici de redimensionner une image, pour qu'elle soit la plus grande possible, tout en conservant ses proportions.

Code:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html>
 
<head>
<meta charset="utf-8">
<style>
  body {
    margin: 0px;
    padding: 0px;
    text-align: center;
  }
  img {
    margin: 0px;
    padding: 0px;
    vertical-align: bottom;   
  }
</style>
<script>
  ajuster=function() {
    var H=window.innerHeight,
    L=Math.floor(l*window.innerHeight/h),
    E=0;
    if (L>window.innerWidth) {
      H=h*window.innerWidth/l;
      L=window.innerWidth;
      E=Math.floor(window.innerHeight/2-H/2);
    }
    image.width=L;
    image.height=H;
    image.style.marginTop=E+"px";
  }
  onload=function() {
    image=document.getElementsByTagName("IMG")[0];
    h=image.height;
    l=image.width;
    ajuster();
  };
  onresize=ajuster;
</script>
</head>
 
<body><img src="image.jpg"></body>
 
</html>

30/10/2017, 07h03
RYMOOO
Bonjour

J'ai trouvé une solution facile pour ajuster les images par rapport à la taille de navigateur , en fait tu peux ajouter ces deux propriétés au style d'image .
Code:

1 2 3 4 img, object, embed, canvas, video, audio, picture { max-width: 100%; height: auto; }
Vraiment ça marche très bien . bonne journée

Bonjour,

Le code ci-dessous, testé avec Firefox, n'ajuste pas l'image à la taille de la fenêtre, contrairement à celui, plus complexe, que j'ai proposé.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!doctype html> <html> <head> <meta charset="utf-8"> <style> img { max-width: 100%; height: auto; } </style> </head> <body><img src="image.jpg"></body> </html>

30/10/2017, 17h20
RYMOOO

Bonjour

Il me semble qu'on a pas sur la même longueur d'onde , toi tu veux agrandir les images de sorte que sa taille agrandie et s'ajuste avec la taille de navigateur , donc tu cliques sur les images pour les agrandir en ce moment on exécute ton code , cependant le mien si on redimensionne la taille de navigateur les images dans la page se réduisent automatiquement si on ajoute au style max-width: 100%; height: auto; .

Pour le moment j'ai pas besoin d'agrandir les images .