28119 sujets

CSS et mise en forme, CSS3

[Résolu] Images oblongues

Bonjour à tous
J'aimerais votre aide pour comprendre exactement ce qui se passe avec des images "oblongues", c'est à dire dont la largeur est grande et la hauteur petite dans la page https://tests.osirisnet.net/news/@n_08_21.htm
Il y a 3 images de ce type, dans l'ordre la première, la 5ème et la 7ème
Il s'agit de balises

<figure>
    <img ...>
    <figcaption>...</figcaption>
</figure>


Si on utilise une petite largeur d'écran (téléphone) l'image se réduit pour être plus petite que le texte qui l'accompagne et cela donne un rendu pas agréable. La raison est sans doute que les images se réduisent au prorata de la largeur de l'écran et que la police de caractères ne se réduit pas de la même façon pour que le texte reste lisible.
Pour sortir de ce problème, je ne vois pour l'instant que d'utiliser des images de plus grande taille (en multipliant les dimensions par 2, par exemple) ce qui ne devrait pas être nécessaire car la largeur de l'image devrait être suffisante, mais il faudrait faire varier le facteur de réduction.
Verriez vous une solution purement CSS à ce problème sans mettre encore plus de désordre dans un ensemble de fichiers CSS qui sont déjà passablement compliquées plus que raison ?

Merci de bien vouloir me donner votre avis.
Modifié par PapyJP (30 Aug 2021 - 15:34)
Modérateur
Bonjour,

ton CSS actuel se sert effectivement de ton ecran pour determiner une taille maxi :
.diapo.width40 img {
    max-width: 32vw !important;
}

Si tu y ajoute un min-width, il prendra le pas sur les valeurs de width et max-width.
.diapo.width40 img {
    max-width: 32vw !important;/* en fonction de l'écran */
    min-width: 100%;/* la largeur de son parent <figure>*/
}


( ligne 185 de common.css )
Cdt


edit Si l'idée etait aussi de l'empecher de devenir trop large (pas 100% en grand écran mais seulement en dessous d'une certaine largeur du conteneur) , il y aurait moyen de jouer avec clamp() et eventuellement calc() pour valider un min-width:100% seulement en dessous d'une certaine largeur d'écran.
Modifié par gcyrillus (30 Aug 2021 - 21:24)
Meilleure solution
Merci ça me semble une bonne piste. Je regarde ça après avoir dormi, je suis en panne de sommeil ces derniers jours.
Au réveil, j'ai fait la modif et regardé si cela n'introduisait pas de problèmes ailleurs.
Apparemment pas, je mets en œuvre immédiatement.
Merci encore pour ton aide efficace (comme toujours).
Sujet clos
Aller à