Comment régler la hauteur d'une image

(reprise du message précédent)

@Christele Bonjour et merci de ton message
En fait je ne cherche pas une solution: cela fait longtemps que j'ai traité ce problème de diverses manières., mais ce que je cherchais, c'est savoir si les nouveautés de CSS3 (flex et autres gadgets) permettaient de faire cela sans JS ou PHP.
Il semble que la réponse soit "non", ce qui est tout de même surprenant: il s'agit d'une chose très simple, mais apparemment ce n'est pas quelque chose de prévu dans ce produit, après plus de 15 ans d'efforts de normalisation.
Compte tenu de mon âge et de mon état de santé, je ne pense pas que je connaitrai jamais la solution CSS à quelque chose qui est fondamentalement un problème relevant du CSS.

J'ai donc conservé dans mon script PHP et dans mon script JS les quelques lignes de code nécessaires à réaliser cette fonction et je suis passé à d'autres choses.

Par contre je ne clos pas ce fil, car peut être cette solution purement CSS existe-t-elle quelque part, et quelqu'un va se réveiller et bien vouloir me la révéler???

@Christele,
hi ! au redimensionnement manuel et progressif de ta fenêtre celle-ci frétille comme une épinoche qui mordille tous les moteurs css et js de mon ordi à le faire suffoquer de malaise ...

@PapyJp,
au regard de ma conviction argumentée sur l'auto-dynamisme-borgne de CSS3, je crains que nous devions attendre CSS4 ... en 2022.
Modifié par pictural (26 Oct 2016 - 00:13)

Il existe il me semble une solution, elle nécessite un peu de divite cependant, particulière pour la version «table» plus compatible que la version «flex» (ajouts de divs ne servant qu'à des fins visuelles).

Le principe est d'utiliser un conteneur adaptatif (table ou flex) pou s'adapter à la fenêtre et au contenu annexe, et ensuite mettre l'image dans un conteneur que l'on sort du flux pour qu'elle ne participe plus au redimensionnement.
La sortie du flux se fait grâce à un parent en relative et l'enfant en position absolute. En définissant la position top et bottom, cela lui donne une hauteur explicite (tout en étant relative).

Les deux solutions en image:

table: http://codepen.io/anon/pen/pEByAG
flex: http://codepen.io/anon/pen/ORGgmq

Merci Kusto
ça a l'air effectivement de marcher sans JS
Je vais regarde de près

Bravo ! et les deux solutions sont parfaitement logiques et, de plus elles sont fluides.

Quoiqu'un peu tournicoté, cela est effectivement bien réel et performant, et je suis content d'être venu pour le voir.

@PapyJp,
dans le même esprit de flux en "poupées russes", ce devrait être faisable de formater une légende mono ou multi-ligne qui se dévoilerait intégralement au :hover span d'un div, peut-être avec une astuce sur le bottom:Xpx changeant du div:hover ...
Modifié par pictural (26 Oct 2016 - 23:23)