Hauteur d'image en fonction de la largeur du parent

Bonjour à tous,

Pour redimensionner une image en fonction de la largeur du parent qui elle-même est calculée en fonction de la largeur de la fenêtre, il y a la technique suivante, qui permet de garder les proportions de l’image :

height: calc((100vw / a) / b)px

où a est le nombre d’images à redimensionner, situées sur une même ligne et b est le coefficient de proportionnalité de chaque image (on fait l’hypothèse qu’elles ont toutes la même valeur pour b) égal à hauteur_image / largeur_image. On peut de plus soustraire ce calcul à une valeur c qui serait la somme de marges, paddings et largeurs d’autres éléments situés sur cette ligne.

Remarque : on fait l’approximation que 100vw est à peu près égale à la largeur du parent de l’image (de toute façon on réduit l’erreur via la valeur c).

Au final ça marche super bien, mais j’ai deux questions.

1. Est-ce que a est réellement le nombre d’images devant être redimensionnées ? N’est-ce pas plutôt le nombre d’éléments (images ou non), situés sur la même ligne que la ou les images à redimensionner ?

2. Si je comprends bien, on dit que la hauteur de l’image est égale à grosso modo la largeur du parent, divisé par le nombre d’images, résultat qui est divisé par le coefficient de proportionnalité de chaque image. Pour essayer de comprendre, je me suis dit qu’en fait on répartissait la largeur du parent en x carrés de même taille (et dans 1 carré on peut placer 1 image du coup - car / a) et que chaque carré était de nouveau réparti en y sous-carrés de même taille (et dans 1 sous-carré on peut placer plus - ou moins - d’une image car / b). C’est cette notion de sous-carrés que je ne suis pas sûr de bien saisir : puis-je réellement utiliser cette représentation mentale pour expliquer la division par un coefficient de proportionnalité ?

3. Par ailleurs, c’est la hauteur de l’image qui est modifiée : ça ne colle pas bien à la représentation mentale que je me suis construite et que j’explique en 2.

Au final vous avez compris ma réelle question :

1. Comment comprendre ce genre de "formules" mathématiques ?

2. Y a-t-il une démonstration mathématique qui me permette de comprendre précisément pourquoi les proportions d’une image sont conservées grâce à cette "formule" lorsque la largeur du parent et/ou de la fenêtre change ?

3. Pourriez-vous me dire si ma représentation mentale est correcte à peu près et la corriger pour qu’elle soit valide totalement ?

4. Enfin, comment expliqueriez-vous cette "formule" ? (par ailleurs, utiliseriez-vous vous aussi une représentation mentale similaire à la mienne, voire différente ?)

Je sais, ça fait beaucoup de questions !

Merci d’avance,

En espérant avoir au moins une réponse (complète de préférence svp )… merci encore ! très bonne journée et bon week-end à tous,