Il faut bien comprendre le contexte dans lequel je travaille.
Le propriétaire du site écrit quelque chose comme
<div class="cluster width60">
<!-- c'est un dire un groupe d'images largeur max 60% de la page -->
<script>diapo(image1)</script>
<script>diapo(image2)</script>
</div>
C'est à moi, en utilisant JavaScript et CSS, de faire en sorte que ça ait une présentation plus ou moins conforme à ce qu'il désire.
Dans le site officiel actuel
https://www.osirisnet.net/news/n_02_22.htm
les tailles d'images sont calculées par JavaScript au chargement de la page et à chaque changement de taille ou d'orientation de la fenêtre et j'obtiens
Ce que je cherche actuellement à faire c'est obtenir l'équivalent par CSS, et je n'arrive pas à le faire.
Sur le fond, ça n'a pas grande importance, ce n'est pas comme si je n'avais pas du tout de solution, mais comme je l'ai déjà dit je n'aime pas jeter l'éponge.
Ce que je constate en analysant la page par l'outil de développement de FireFox, c'est que
div.cluster prend une largeur de 397 px alors que le max-width calculé est de 180px
Les deux figure.diapo ont une largeur de 190px alors qu'elles ont width:50% donct au maximum elles devraient avoir width 90px
Cela veut donc dire que ce sont les images qui l'emportent.
Ces images sont définies avec max-width:16rem
La raison de cette expression c'est que la valeur de rem est calculée par
@media screen and (max-width:1024px) {
html {font-size:1.7vw;}
}
@media screen and (max-width:705px) {
html {font-size:12px;}
}
c'est ce qui permet de rendre la page responsive en gardant le texte lisible.
Ici on a rem=12px donc max-width=12*16 = 180px, donc c'est bien la taille des images qui l'emporte sur les tailles maximum données pour leur conteneur.
La question n°1 c'est pourquoi le conteneur n'impose pas sa taille max.
La question n°2 c'est comment faire pour éviter ça, quelle valeur et quelle unité utiliser ?
Je vais essayer de trouver quelque chose dans ce sens.
Modifié par PapyJP (24 Oct 2022 - 17:42)
