Discussion :

[awalter1]

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

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

[awalter1]

Merci, tout simple en effet.

[NoSmoking]

Bonjour,

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 !?!

[awalter1]

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 :
Reste plus qu'à faire les conversions pour les autres tailles.

[NoSmoking]

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 html :

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

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.

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 html :

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

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