1493 sujets

Web Mobile et responsive web design

[Résolu] Ajustement de taille d'images

Bonjour à tous
La page de test se trouve à l'adresse https://tests.osirisnet.net/tombes/pharaons/amenhotep3/test-amenhotep3_01.htm

Elle contient plusieurs groupes d'images avec la structure suivante :

<div class="cluster">
    <div class="row">
        <figure>...</figure>
        <figure>...</figure>
        ........
    </div>
    <div class="row">...</div>
    ........
</div>


Vous pourrez visualiser ces groupes d'images en ouvrant cette page.

Sur un écran large j'ai cette apparence pour un "cluster" d'une seule rangée avec 2 <figure>
upload/1664552937-48769-image1.jpg

Si on réduit la taille de l'écran on obtient cette apparence
upload/1664552983-48769-image2.jpg

Je n'arrive pas à écrire le CSS qui permettrait de réduire la taille des images pour garder la même apparence. Ces images ont la même hauteur. Les essais que j'ai faits conduisent à modifier la hauteur des images de façon inégale.

Merci pour votre aide
Modifié par PapyJP (30 Sep 2022 - 18:02)
Peut-être qu'en utilisant grid layout au lieu de flex sur ta div qui contient les images ça pourrait marcher.
Tu définis la position de chaque image et la disposition ne devrait pas bouger normalement si tu réduits la taille de l'écran et du coup les images devraient s'ajuster de façon égale.
Merci de ta réponse

Je problème c'est que la plupart du temps, ce qui est dans la grille ce n'est pas une image, mais une image avec un texte sous la forme d'une <figure>
Si on modifie la taille de la <figure> de façon égale les images ne vont pas nécessairement garder les mêmes hauteurs.
Par exemple dans l'image que j'ai mise, il y a deux <figure> dont l'une a 1 ligne de texte et l'autre 2 lignes de texte.

Dans ce site, toutes les dimensions autres que les images sont exprimées en "em".
J'ai cherché à truquer en recherchant en SavaScript la valeur de "em" en px et la largeur de la ligne en px en utilisant getComputedStyle. Il me suffirait de mettre une valeur en em en fonction de la largeur relative de l'image par rapport à celle de la ligne.
Pour le moment je tombe sur un problème curieux : une fois que j'ai exécuté getComputedStyle la fonction se déroule correctement mais ensuite mes scripts se plantent d'une façon bizarre.
Ça ne m'inquiète pas outre mesure, je trouverai cela à tête reposée
Salut Papy,

Là j'ai pas trop le temps car je fignole un truc sur l'un de mes propres projets. Du coup, regarde sur cette page les quatre images côte à côte : Images, documentation.

Bien sûr, j'ai aussi utilisé des media queries, mais si tu fais abstraction de cela tu verras qu'elles sont aussi "souples" (c'est à dire étirables sans déformation, et vont de pair ensemble). Si leurs comportements te conviens, tu peux explorer le code, si tu coinces on en reparle.

Bonne soirée.
Modifié par Olivier C (02 Oct 2022 - 08:33)
Merci de ta réponse, je vais regarder ça demain.
A première vue tes images ont non seulement la même hauteur, mais aussi la même largeur, ce qui n'est pas le cas des miennes. Elles ont la même hauteur parce que je les réduits par JavaScript + canvas pour cela, mais bien entendu les largeurs sont différentes
Il faudra regarder ce que ça donne
Bonne soirée
Rien d'insurmontable : en prévision d'images qui n'ont pas la même dimension on ajoutera avantageusement un object-fit: cover.
Sinon tu peux toujours garder ton script.
On verra ça.
Modifié par Olivier C (03 Oct 2022 - 11:24)
Après pas mal de boulot, d'insomnie et de recherches de doc sur Internet, j'ai trouvé une solution qui me convient. Pas sûr qu'elle soit utilisable en dehors de ce contexte.

J'ai préféré ne pas me lancer dans les grids, déjà que je galère toujours avec les flexboxes,
surtout que la règle du jeu est de partir simplement de ce qu'écrit le propriétaire du site

<div class="cluster...">
    <script>diapo(...)</script>
    <script>diapo(...)</script>
    <script>diapo(...)</script>
    ....
</div>

A moi de me débrouiller par JavaScript pour générer par manipulation du DOM l'intérieur de <div class="cluster"> à partir des tailles réelles d'images et de divers paramètres fournis dans les classes du cluster et les paramètres d'appels du script diapo.

Sans entrer dans les détails, je procède de la façon suivante pour rendre les rangées de diapo responsives :
1) calculer la largeur max des "rangées" de diapos en fonction du contexte
2) calculer quelle hauteur donner aux images pour que la largeur totale des diapos tiennent dans la rangée, et exprimer cette hauteur en "rem"
Comme tout le site est rendu responsive en modifiant la valeur du "rem" par mediaqueries, mes diapos deviennent responsives. CQFD
Élémentaire mon cher Watson ! Smiley cligne
Sujet clos
Aller à