Discussion :

[DarwinTheBeagle]

Bonjour.
Je redimensionne automatiquement une image lors du redimensionnement de la page.
Si la page fait plus de 1000 px de large, je détermine une taille maxi pour mon image qui est la taille d origine.
Cela fonctionne, je vérifie la taille affectée à l image dans la barre de titre de ma page mais bien que la taille affectée à l image est correcte, le rendu est surprenant.
Pour info la taille initiale de mon image est de 500 x 725 et bien que je lui affecte ces valeurs elle apparait en 625 x 465.
Qu'ai-je raté ?
Je vous remercie pour vos conseils

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function resizeIHomeImage() {
        var theImg = document.getElementById('HomeImage');
        var wmax = theImg.naturalWidth;
        var hmax = theImg.naturalHeight;
        var largeur = window.innerWidth;
        if (largeur >= 1000) {
            theImg.height = wmax;
            theImg.width = hmax;
        } else {
            theImg.height = 150;
            theImg.width = 150;
        }
        document.title = theImg.width + " x " + theImg.height;
    }

[ASCIIDEFOND]

Salut DarwinTheBeagle,

Code JavaScript :

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
    <script>
      function resizeIHomeImage() {
        let theImg = document.getElementById('HomeImage'),
        largeur = window.innerWidth,
        hmax = theImg.naturalHeight, 
        wmax = theImg.naturalWidth 
 
        if (largeur >= 1000) {
          theImg.style.height = hmax + 'px'
          theImg.style.width = wmax + 'px'
        } else {
          theImg.style.height = '150px'
          theImg.style.width = '150px'
        }
        document.title = theImg.width + ' x ' + theImg.height
      }
    </script>

[NoSmoking]

Bonjour,
déjà tu as une erreur d'affectation de ta largeur et de ta hauteur

Code :

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

1
2
theImg.height = wmax;
theImg.width = hmax;

aurait du être :

Code :

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

1
2
theImg.height = hmax;   // theImg.naturalHeight
theImg.width = vmax;    // theImg.naturalWidth

... mais tu n'a pas besoin de redéfinir la hauteur et la largeur, un des deux suffit en mettant l'autre à auto.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function resizeIHomeImage() {
  var theImg = document.getElementById('HomeImage');
  var largeur = window.innerWidth;
  // on ne joue qu'avec la hauteur par exemple
  if (largeur >= 1000) {
    theImg.height = theImg.naturalHeight;
 
  } else {
    theImg.height = 150;
  }
  theImg.style.width = "auto";
  document.title = theImg.width + " x " + theImg.height;
}

... ainsi, tu respectera l'aspect-ratio de ton image quoiqu'il arrive.

D'autre part tu pourrais également gérer cela en CSS avec les media-queries.

[DarwinTheBeagle]

Merci pour vos réponses.

Effectivement en CSS c est faisable et plus simple mais les transitions aux passages des breakponts sont bien moins fluides.