Déterminer la taille d'une image affichée dans un container

Version imprimable

Voir 40 message(s) de cette discussion en une page

02/03/2023, 10h36
awalter1

Déterminer la taille d'une image affichée dans un container

Bonjour,
J'affiche des images de tailles diverses dans un container de taille fixe (au sens css : width=700px et height=500px).
Je conserve les proportions de l'image.
Trois cas se présentent en fonction du rapport largeur/hauteur = 700/500 du container
- l'image a un rapport =700/500 : l'image touche les bords haut, bas, droite et gauche du container.
- l'image a un rapport >700/500 : l'image touche les bords gauche et droit du container, l'image est moins haute pour respecter les proportions.
- l'image a un rapport <700/500 : l'image touche les bords haut et bas du container, l'image est moins large pour respecter les proportions.

Connaissez vous une manière de connaitre par avance la taille finale de l'image en pixel connaissant 1)le rapport largeur/hauteur de l'image et 2)la taille du container (ici 700x500).

J'espère avoir été clair.
Merci
02/03/2023, 12h32
mathieu

ça se calcule à l'aide du rapport R de l'image.
si R > 700 / 500, la largeur finale sera 700 px et donc la hauteur sera 700 / R.
et si R < 700 / 500, la hauteur finale sera 500 px et donc la largeur sera 500 × R.
03/03/2023, 08h58
awalter1

Merci, tout simple en effet.
03/03/2023, 18h27
NoSmoking

Bonjour,

Citation:

Connaissez vous une manière de connaitre par avance la taille finale de l'image en pixel connaissant

in fine quel est le but du jeu !?!
04/03/2023, 12h42
awalter1

1 pièce(s) jointe(s)

Le but du jeu est de pouvoir associer à l'image affichée une sorte d'échelle afin de mettre en perspective les dimensions de l'image.
Dans mon cas, je vais montrer une feuille A4 à coté de chaque image (photo de tableau). Je dois alors définir le container en pixels qui va accueillir cette "feuille A4".
Exemple : Pièce jointe 635223
Reste plus qu'à faire les conversions pour les autres tailles.

J'ai repris un peu le fil de tes discussions et suis tombé sur cette galerie, GALERIE ALAIN WALTER, qui visiblement reprend pas mal de tes problématiques.

Il y a pas mal de chose à dire et notamment celle qui me paraît être la principale est que tes images font partie intégrante de ta page et dans ce cas ne doivent être en aucun cas affichées en background mais dans des balises <img> sans quoi ta pas n'a pour ainsi dire aucun contenu.

Un autre point important est que tes éléments <li> doivent être enfant d’élément <ul>, ou <ol>, ce qui rend ta page non conforme mais ce n'est pas une catastrophe les moteurs de rendu s'en sortant plutôt bien ;)

Tu uses et abuses, à mon avis, inutilement des FLEX et des GRID. IL me semblerait plus sain d'utiliser, pour chaque image d'une structure sémantique comme :
Code:

1 2 3 4 5 6 <figure> <figcation> Définition de l'image </figcation> <img src="ton-image" alt="description image" data-size="larg x haut" loading="lazy"> </figure>
Chaque <figure> pouvant être en display:flex pour la mise en page.

Petite explication sur :
data-size="larg x haut" : pour pouvoir calculer dynamiquement la taille de ta vignette A4, d'autant que ces valeurs tu les connais ;
loading="lazy" pour charger suivant le besoin tes images qu'il serait bon de redimensionner à la baisse.

Citation:

Reste plus qu'à faire les conversions pour les autres tailles.

C'est typiquement le boulot de JavaScript, côté client, sauf à le faire effectivement directement côté serveur. Il n'est cependant pas obligatoire de passer par une image, celle-ci étant réalisable aisément en HTML-CSS.

Je n'ai pas pu résister à te faire une maquette possible, le calcul dynamique du format A4 étant intégré en fin de page.

↪ Maquette sur base de peindreamonampteuil.go.yj.fr/galerieAW.php

Nota :
Pour l'occasion la structure d'une ligne est la suivante :
Code:

1 2 3 4 5 6 7 <figcaption> <h2>Le crépuscule sur la mer</h2> Acrylique sur toile<br>2023<br>100x50 <span class="formatA4">A4</span> </figcaption> <img src="https://peindreamonampteuil.go.yj.fr/medias/2023_02_Le_crepuscule_sur_la_mer.jpg" data-size="100 x 50" alt="Le crépuscule sur la mer" loading="lazy"> </figure>
Le <span> pourrait être ajouté dynamiquement mais bon ...

Je te laisse regarder la source et si tu as des questions n'hésite pas ;)

06/03/2023, 15h26
awalter1

Ouah trop fort!
Bravo, C'est exactement le rendu espéré. Je vais l'incorporer dans mon code existant.
J'avoue que je n'ai pas tout compris dans la construction de l'image A4 : comment se fait le lien entre le script et l'affichage de l'image? Je ne suis pas au niveau 8O, je code à l'ancienne.
Quant à la taille des images, en effet, elles ne devraient pas dépasser 0,5 Mo étant donné que le container fait 700x500... Je dois les convertir.

Merci beaucoup

Citation:

J'avoue que je n'ai pas tout compris dans la construction de l'image A4

A quel niveau, si c'est pour sa construction : Effet de coin plié, folded corner.

L'image A4 est cachée par défaut, display:none, et lorsque l'image tableau est chargée on la redimensionne, règle de trois, et on la passe en display:block, sauf si trop grande par rapport à l'image tableau.

C'est la fonction JavaScript qui s'en charge :

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
document.addEventListener("DOMContentLoaded", () => {
  const A4_WIDTH = 21.0;
  const A4_HEIGHT = 29.7;
  const A4_RAPPORT = A4_WIDTH / A4_HEIGHT;
 
  const images = document.querySelectorAll("figure img");
  images.forEach((img) => {
    img.onload = () => {
      const parent = img.parentNode;
      // taille image affichée
      const actualWidth = img.width;
      // lecture data-size
      const data = img.dataset.size?.split("x");
      // taille image originale
      const initialWidth = data ? data[0] : img.naturalWidth;
      // width-height A4 / image
      const widthImgA4 = A4_WIDTH / initialWidth * actualWidth;
      const heightImgA4 = widthImgA4 / A4_RAPPORT;
      // affichage si besoin
      if (widthImgA4 < img.width && heightImgA4 < img.height) {
        const elemA4 = parent.querySelector(".formatA4");
        if(elemA4){
          elemA4.setAttribute("draggable", true);
          elemA4.style.width = widthImgA4 + "px";
          elemA4.style.height = heightImgA4 + "px";
          elemA4.style.display = "block";
        }
      }
    }
  });
});

07/03/2023, 10h21
awalter1

Je ne comprenais pas quel mécanisme faisait que l'image A4 était construite.
J'ai enfin compris que le script est en attente (addEventListener) du chargement d'une image pour construire l'image A4 : le foreach sur img dans le cas d'un chargement (onload).

Sans vouloir abuser, j'ai néanmoins un petit souci :
L'image A4 s'affiche parfaitement au premier affichage de la page, mais si je fais Retour pour la page d'accueil puis je reviens à nouveau sur cette page, la page A4 ne s'affiche plus.
Quelque chose à réinitialiser avant le Retour?

Merci
07/03/2023, 10h34
mathieu

Citation:

Envoyé par awalter1

Sans vouloir abuser, j'ai néanmoins un petit souci :
L'image A4 s'affiche parfaitement au premier affichage de la page, mais si je fais Retour pour la page d'accueil puis je reviens à nouveau sur cette page, la page A4 ne s'affiche plus.
Quelque chose à réinitialiser avant le Retour?Merci

vous parlez d'un souci avec la page suivante ?
https://peindreamonampteuil.go.yj.fr/galerieAW.php

je ne vois pas ce que vous décrivez, je vois bien le même résultat en faisant "retour".
j'ai la dernière version de firefox, peut-être que vous avez un souci de navigateur comme par exemple un cache bizarre ?
07/03/2023, 15h56
awalter1

Bonjour

J'ai bien la dernière version FF : 110.0.1 64 bits.
J'ai mis depuis longtemps le cache à 0 octet pour éviter ses effets de bord.

Lorsque la page avec les tableaux est affichée la 1ère fois, les images A4 sont aussi affichées.
Si je rafraichis la page, ou bien si je clique sur le bouton Retour puis reviens sur cette page les images A4 n'apparaissent plus.
07/03/2023, 16h09
ddaweb

Je confirme le problème de la feuille A4, je dois faire un CTRL-F4 lors du retour à la page après un 'Retour'.
C'est donc un problème de cache.
Je suis également avec FF, test avec Edge : idem
07/03/2023, 16h39
awalter1

Alors c'est le cache coté serveur car le cache navigateur n'est pas utilisé.

J'ai ajouté une deuxième galerie :
- clic pour sélectionner 1ère galerie : les tableaux sont affichés avec l'image A4.
- Retour
- clic pour sélectionner 2ème galerie : les tableaux sont affichés avec l'image A4.
-Retour
- clic sur l'une ou l'autre des galeries : les tableaux sont affichés sans l'image A4.

Je viens effectivement de voir ce dont tu parles et qui n'est pas forcément reproductible suivant le navigateur utilisé.

Je te propose de remplacer le code JavaScript actuel par celui ci-dessous :

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
/**
 * A mettre en fin de page
 */
function ajusteA4(img) {
  const A4_WIDTH = 21.0;
  const A4_HEIGHT = 29.7;
  const A4_RAPPORT = A4_WIDTH / A4_HEIGHT;
 
  console.log(img.src)
  const parent = img.parentNode;
  // taille image affichée
  const actualWidth = img.width;
  // lecture data-size
  const data = img.dataset.size?.split("x");
  // taille image originale
  const initialWidth = data ? data[0] : img.naturalWidth;
  // width-height A4 / image
  const widthImgA4 = A4_WIDTH / initialWidth * actualWidth;
  const heightImgA4 = widthImgA4 / A4_RAPPORT;
  // affichage si besoin
  if (widthImgA4 < img.width && heightImgA4 < img.height) {
    const elemA4 = parent.querySelector(".formatA4");
    if (elemA4) {
      elemA4.setAttribute("draggable", true);
      elemA4.style.width = widthImgA4 + "px";
      elemA4.style.height = heightImgA4 + "px";
      elemA4.style.display = "block";
    }
  }
}
 
const images = document.querySelectorAll("figure img");
images.forEach((img) => {
  const imgW = img.naturalWidth;
  const imgH = img.naturalHeight;
  // image non encore chargée
  if (!(imgW * imgH)) {
    img.addEventListener("load", () => ajusteA4(img));
  }
  // image chargée
  else {
    ajusteA4(img);
  }
});

c'est une approche à peine différente. A tester donc !

08/03/2023, 10h50
awalter1

Bonjour à tous

NoSmoking, ta solution fonctionne à merveille. :applo:, plus de pb au rechargement de la page.
C'est super :D.

J'ai analysé ton code afin de comprendre un peu (je ne connais pas javascript, mais je devine les grandes lignes). Je vois que tu récupères via img.natural.width les vrais dimensions de l'image.
Mais d'où viennent ces valeurs? Est ce dans les propriétés du fichier image?

Merci

Je vais cloturer la discussion car c'est largement résolu.
Merci à ceux qui y ont contribué, mention spéciale à NoSmoking.
J'espère que cela servira à d'autres.

Dans le code fourni au post#14, tu peux supprimer la ligne 9, console.log(img.src), qui n’était là que pour vérifier le passage ou non dans la fonction lors du retour.

Citation:

plus de pb au rechargement de la page.

Je n'ai pas souvenir d'avoir déjà rencontré ce soucis ...

Citation:

Mais d'où viennent ces valeurs? Est ce dans les propriétés du fichier image?

Ce sont les valeurs intrinsèques des images, les dimensions auxquelles s'afficherait l'image dans le navigateur en absence de directives de dimensionnement.

Justement, concernant ces images il te faut user de plus de rigueur dans leur dimensionnement, voilà ce que j'ai rapidement relevé :

Image Taille Affichage Dim. A4 Vue A4

2022_10_pouring_N_4.jpg 2546 x 2558 547 x 550 382.9 x 541.5 oui

2022_10_pouring_N_5.jpg 2690 x 2676 553 x 550 387.1 x 547.5 oui

2022_10_pouring_N_6.jpg 2739 x 2686 561 x 550 392.7 x 550.4 NON

2022_10_pouring_N_8.jpg 2706 x 2715 548 x 550 383.6 x 542.5 oui

2022_10_pouring_N_10.jpg 2512 x 2512 550 x 550 385.0 x 544.5 oui

Toutes ces toiles ont la même dimension, 30x30, mais toutes ne présenterons pas l'image A4 du fait du mauvais rapport largeur/hauteur.
Seule l'image « 2022_10_pouring_N_10.jpg » respecte ce rapport de 1.

Ce n'est pas en soi trop problématique mais tu pourrais avoir des questions !

09/03/2023, 12h41
awalter1

Bonjour

Citation:

Envoyé par NoSmoking

Dans le code fourni au post#14, tu peux supprimer la ligne 9, !

Oui c'est fait ;)

Citation:

Envoyé par NoSmoking

Je n'ai pas souvenir d'avoir déjà rencontré ce soucis ... !

Les feuilles A4 ne s'affichaient pas après un rechargement de page.

Pour ce qui est des tailles d'images, effectivement à partir de mes images photos, je devrais les redécouper en gardant la proportion largeur/hauteur.

D'ailleurs, j'avais une question sur l'emplacement de l'image A4. Je ne vois pas pourquoi elle se place là, si loin du texte du tableau, au dessus d'elle : j'ai regardé les objets avec l'inspecteur ; je n'y vois pas de directive d'espacement qui le justifie. Une idée?

Merci

Image	Taille	Affichage	Dim. A4	Vue A4
2022_10_pouring_N_4.jpg	2546 x 2558	547 x 550	382.9 x 541.5	oui
2022_10_pouring_N_5.jpg	2690 x 2676	553 x 550	387.1 x 547.5	oui
2022_10_pouring_N_6.jpg	2739 x 2686	561 x 550	392.7 x 550.4	NON
2022_10_pouring_N_8.jpg	2706 x 2715	548 x 550	383.6 x 542.5	oui
2022_10_pouring_N_10.jpg	2512 x 2512	550 x 550	385.0 x 544.5	oui

Citation:

D'ailleurs, j'avais une question sur l'emplacement de l'image A4. Je ne vois pas pourquoi elle se place là, si loin du texte du tableau, au dessus d'elle : j'ai regardé les objets avec l'inspecteur ; je n'y vois pas de directive d'espacement qui le justifie. Une idée?

Je n'ai fait que repoduire, à peu près, ce que l'on voyait sur la capture que tu nous as fourni post #5.

Le positionnement se fait par rapport à la <figure> conteneur et suivant cette règle, simplifiée pour l'occasion :
Code:

1 2 3 4 5 6 7 8 figure.row { position: relative; /* pour servir de référent */ } .row .formatA4 { position: absolute; /* impératif pour le placement au pixel */ bottom: 1em; /* position à 1em (≈16px par défaut) du bord bas */ left: 1em; /* position à 1em (≈16px par défaut) du bord gauche */ }

10/03/2023, 10h20
awalter1

Oui j'ai compris.
J'ai changé le bottom par un top qui me cale par rapport au haut de la zone, c'est ce que je voulais.
Merci

Bonjour Mathieu,
Je voudrais modifier le code que tu m'avais suggéré pour l'affichage de l'image et je ne comprends pas deux points subtils.
Dans la ligne suivante :

Code:

print ' <img src="' . htmlentities($image,ENT_QUOTES) . '" alt="' . htmlentities($texte,ENT_QUOTES) . '" data-size="' . htmlspecialchars($dim) . '" loading="lazy">';

Tu définis l'attribut data-size qui va contenir les dimensions du tableau : 100x40 par exemple
Ensuite cette fonction va être appelé pour chaque image affichée :
Code:

1 2 3 4 5 6 function ajusteA4(img) { ... // lecture data-size const data = img.dataset.size?.split("x"); //LIGNE A // taille image originale const initialWidth = data ? data[0] : img.naturalWidth; //LIGNE B
Sur le principe c'est clair.
Je devine ensuite dans la LIGNE A qu'on récupère dans data[0] et data[1] les valeurs 100 et 40 (avec mon exemple plus haut), mais je ne trouve pas de signification au ? qui est un opérateur conditionnel, non?
Après, dans la LIGNE B, on utilise data (qui est un tableau) comme étant une condition pour déterminer si on prend data[0] ou img.naturalWidth. C'est incompréhensible pour moi car data est un tableau.

Peux tu m'éclairer s'il te plait?
Merci beaucoup

Voir 40 message(s) de cette discussion en une page