Comment régler la hauteur d'une image

Bonjour

Je fais face au problème mille fois ressassé du réglage des éléments pour occuper correctement la hauteur de la page.

Mon objectif est de faire un diaporama (alias carrousel) d'images de tailles différentes, tout en tirant le meilleur parti possible de la taille de l'écran pour les afficher au mieux.
Certaines sont en largeur et devront être limitées par un max-width, ça je sais faire, mais d'autres sont en hauteur, et là je sèche!
Mon exemple se trouve ici: http://tests.osirisnet.net/migration/tools/slideshow-test1.html
Tout le CSS est dans cette page de test.
Le cadre n'est là que pour matérialiser le conteneur "slide", il disparaitra bien entendu dans la page finale.

Je suis sûr que ce problème classique possède une solution classique, mais je ne l'ai pas trouvée...
Merci de votre aide.
Modifié par PapyJP (18 Oct 2016 - 22:28)

Je ne sais pas si c'est ce que tu cherches :

.element {
    height: 100vh;
    max-height: 20rem; /* Par exemple... */
}

Modifié par Olivier C (14 Oct 2016 - 13:16)

Bonjour.

Je suis désolée mais c'est difficile pour moi de m'adapter à votre façon de faire...

Dès que le module Flexbox est apparu sans préfixe, je me suis mise à l'utiliser (à outrance).

Votre problème est facilement résolu dans ce cadre à condition de tenir compte de l'indocilité des images (exposée dans cet article de M. Goetter).

Peut-être que quelqu'un trouvera une façon qui vous conviendra...

Merci de vos réponses.
Cela vous semble sans doute évident, mais pour moi je ne comprends pas ce que je dois faire, ce doit être lié à la difficulté qu'ont les personnes âgées de s'adapter à de nouveaux concepts. Ma grand mère n'a jamais su utiliser un téléphone....
Pourriez vous être plus explicites s'il vous plait?

Dans ma page de tests, la zone qui contient le "Lorem ipsum" est de hauteur variable selon les diapos, ce qui ne facilite pas le réglage des hauteurs.

Je rappelle la partie du CSS qui concerne ces éléments:

html, body{height:100%;width:100%;}
#slide{margin:1em auto;text-align:center;}
#slide figcaption{display:table;max-width:60%;margin:0.5em auto;}
#slide img{border-radius:0.5em;} 

Je voudrais que
1) #slide occupe "le reste" de la hauteur de la page
2) la hauteur de l'image soit limitée au "reste" de la hauteur de #slide.
Comment dit-on cela en CSS?
Quelles sont les propriétés à modifier ou à ajouter?
Modifié par PapyJP (14 Oct 2016 - 14:14)

Bon!
J'ai fait un nouvel essai avec "flex" en m'inspirant du code de Raphaël, mais je n'ai absolument rien compris à ce que je faisais.
Voir http://tests.osirisnet.net/migration/tools/slideshow-test2.html
Pouvez vous avoir la gentillesse de regarder mon CSS et m'expliquer pourquoi ça marche?
Pour moi la réponse est "par chance", et si je devais le refaire, je ne saurais pas.
En particulier je ne comprends absolument pas la signification de ces min-width:0;min-height:0; qui ont l'air d'être déterminants.

PapyJP a écrit :
En particulier je ne comprends absolument pas la signification de ces min-width:0;min-height:0; qui ont l'air d'être déterminants.

C'est expliqué dans l'article susmentionné plus haut :

Zelena a écrit :
... exposée dans cet article de M. Goetter.

Mais personnellement j'utilise une autre méthode de centrage - toujours avec flexbox cependant - quand je veux des images occupant toute la largeur disponible sans déformation : Images
Le code localisé ici : Github

Olivier C a écrit :

C'est expliqué dans l'article susmentionné plus haut :

Mais personnellement j'utilise une autre méthode de centrage - toujours avec flexbox cependant - quand je veux des images occupant toute la largeur disponible sans déformation : Images
Le code localisé ici : Github

Désolé, mais je ne comprends presque rien à l'article de Raphaël, sinon que les propriétés max-width et max-height se réfèrent aux dimensions de l'image, et cela me va très bien: comme je ne veux pas de pixellisation, ne veux effectivement limiter les dimensions de l'image aux dimensions réelle. Cet article est fait pour des gens qui sont familiers de flex et découvrent que leurs images ne se comportent pas comme ils s'attendent.
Je ne cherche pas à occuper toute la largeur, ce qui se fait très facilement sans flex, ni toute la hauteur, je cherche à ce que les images s'affichent "au mieux" sans déborder de l'écran.

L'état actuel de mes travaux s'affiche quand on va à cette adresse: http://tests.osirisnet.net/tombes/pharaons/ramses6/ramses6_slideshow.php
Le point qui ne marche pas comme je voudrais, c'est que toutes les images qui sont moins hautes que l'écran sont cadrées en bas de la page. Ce que je voudrais, c'est qu'elles soient en haut de la <div> qui les contient, mais que si elles sont trop hautes elles ne dépassent pas la hauteur de la page.
Comme je ne comprends pas comment ça marche, je n'arrive évidemment pas à traiter ce problème qui doit être évident pour quelqu'un qui sait.
Les bouquins que j'ai lus ne me sont d'aucune aide, sans doute parce que je ne comprends pas la façon dont fonctionnent flex, du moins dans ce cas là. Pour ce que j'ai compris, flex sert à positionner plusieurs éléments d'une certaine façon. Ici il n'y en a qu'un seul, je ne vois pas comment ça se comporte.

J'ai désespérément besoin de votre aide.
Modifié par PapyJP (14 Oct 2016 - 19:29)

Bonsoir.

PapyJP a écrit :

En particulier je ne comprends absolument pas la signification de ces min-width:0;min-height:0; qui ont l'air d'être déterminants.

Alors, la façon dont moi j'ai compris... le parent d'une image tient compte des dimensions intrinsèques d'une image (ses vraies dimensions)... par défaut. Comme beaucoup de choses en CSS, priorité est donnée au contenu et à ses dimensions. L'image ne va donc pas se déformer à volonté grâce, par exemple, à flexbox... sauf si on neutralise cette propriété par min-width : 0 et min-height : 0... overflow : hidden fonctionne aussi.

J'espère avoir clarifié la situation.

Merci de ta réponse, mais franchement les dimensions minimales peuvent elles être négatives? De telles propriétés sentent la bidouille à plein nez.
Cela n'aide pas à comprendre la logique de fonctionnement de ces propriétés, et du reste je n'y comprends toujours rien, ce qui ne me permet pas de résoudre le problème signalé dans mon précédent message.
Modifié par PapyJP (14 Oct 2016 - 20:55)

En fait, après plusieurs tests, je constate que ce que j'ai fait ne fonctionne pas du tout.
SI on change les dimensions de la fenêtre, l'image se déforme.

Cela n'a rien détonnant: il ne faut pas faire bêtement des copier/coller sans comprendre, mais j'ai eu beau passer la soirée à lire et relire les chapitres "flexbox" de divers bouquins, cela reste pour moi tout à fait hors de propos avec mon problème.

Comme je ne comprends rien à ce que vous proposez, je vais devoir faire cela en JS.
Il est plus facile d'écrire du code en JS que de s'acharner à essayer en vain de comprendre comment faire faire la même chose au navigateur par CSS.

Je verrai demain si la nuit m'a porté conseil.
Modifié par PapyJP (14 Oct 2016 - 23:53)

PapyJP a écrit :

Je ne cherche pas à occuper toute la largeur, ce qui se fait très facilement sans flex, ni toute la hauteur, je cherche à ce que les images s'affichent "au mieux" sans déborder de l'écran.
[...]
Le point qui ne marche pas comme je voudrais, c'est que toutes les images qui sont moins hautes que l'écran sont cadrées en bas de la page. Ce que je voudrais, c'est qu'elles soient en haut de la <div> qui les contient, mais que si elles sont trop hautes elles ne dépassent pas la hauteur de la page.

C'est bien ce que j'avais cru comprendre de ta demande. Edit : peut-être pas après tout...

Pour éviter que l'image se déforme il faut appliquer 'flex-shrink: 0' sur l'élément parent #slide.
Modifié par Olivier C (15 Oct 2016 - 07:05)

Bonjour.

PapyJP a écrit :
..mais franchement les dimensions minimales peuvent elles être négatives?

Des dimensions négatives ?... voyons... Vous voulez dire des dimensions inférieures inférieures à la taille par défaut... oui.

Ce qui peut troubler est que Flexbox n'est pas seul en cause dans cette histoire, les images, qui font partie des éléments remplacés, sont des objets particuliers...

Élément remplacé - CSS | MDN a écrit :
En CSS, un élément remplacé est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.

C'est pour cela qu'il est plus facile d'utiliser les images à l'intérieur de contenant dans Flexbox...

Olivier C a écrit :

Pour éviter que l'image se déforme il faut appliquer 'flex-shrink: 0' sur l'élément parent #slide.

Si flex-shrink est à 0, la dimension ne peut descendre en dessous de flex-basis...
Si align-items est à center et non plus à stretch comme par défaut, il ne doit plus y avoir de déformation...

Je reconnais que vouloir apprendre Flexbox juste pour un cas particulier n'est pas très intéressant... mais il est tellement plus pratique que toutes les bidouilles qui l'ont précédé...

Ouf!
Merci à tous pour votre aide.
La nuit portant conseil, en plus de ceux très précieux que vous m'avez donnés, je suis arrivé à mes fins.
Le résultat est

body{
    display:flex;              /* indique que toute la page est en flexbox */
    flex-direction:column;     /* la direction principale est l'axe vertical */
    justify-content:flex-start; /* ne pas ajouter d'espacement */
    flex-shrink:0;              /* ne pas modifier la proportion des éléments */
}

Les deux dernières lignes sont là pour remettre les choses comme elles sont habituellement dans le sens horizontal(je veux dire sans flex-box).
Merci en particulier à Olivier C, je n'aurais jamais imaginé qu'il faille préciser ce "flex-shrink:0;" et je m’apprêtais à basculer en JS pour résoudre ce problème.

La documentation est -- comme toujours -- antipédagogique: elle liste les propriétés et leurs valeurs, on est perdu dans des choses marginales (du genre "flex-direction:row-reverse;") et l'essentiel n'apparait pas.

Le résultat est visible (pour le moment, car le code va sans doute changer pour d'autres raisons) dans http://tests.osirisnet.net/tombes/pharaons/ramses6/ramses6_slideshow.php

Si j'osais: j'ai supprimé toute mention de flex dans la <div id="slide">, sauf ces fameux min-width:0;min-height:0; et je me suis même demandé si cette <div> qui ne contient que l'image était bien utile à quelque chose. SI je la supprime, plus rien ne marche, l'image se déforme.
Pouvez vous m'expliquer pourquoi?
Modifié par PapyJP (15 Oct 2016 - 09:16)

PapyJP a écrit :
Si j'osais: j'ai supprimé toute mention de flex dans la &lt;div id="slide"&gt;, sauf ces fameux min-width:0;min-height:0; et je me suis même demandé si cette &lt;div&gt; qui ne contient que l'image était bien utile à quelque chose. SI je la supprime, plus rien ne marche, l'image se déforme.
Pouvez vous m'expliquer pourquoi?

Stéphanie, membre de l'équipe d'Alsacreations, avait fait une mise au point sur le sujet : Images responsive, flexbox et souci de ratio d'affichage
Il y a plusieurs solutions, perso j'ai gardé celle de la div...

Olivier C a écrit :

Stéphanie, membre de l'équipe d'Alsacreations, avait fait une mise au point sur le sujet : Images responsive, flexbox et souci de ratio d'affichage
Il y a plusieurs solutions, perso j'ai gardé celle de la div...

J'ai dû mal comprendre le texte de Stéphanie: cela ne me donne pas des images responsives.
Elles semblent s'ajuster en hauteur, qui est l'axe principal, mais elles ne régissent pas au changement de largeur.
J'ai dû faire quelque chose qui cloche. Pourriez vous regarder ce qui ne va pas, par exemple dans http://tests.osirisnet.net/tombes/amarna/akhenaton_tombe/akhenaton_tombe_slideshow.php?fr
Le CSS utile est dans la page.

Merci de votre aide.
Modifié par PapyJP (18 Oct 2016 - 22:47)

Bonsoir PapyJp,
le topique suivant est traité simultanément au tien sur Alsa et ne serait peut-être pas étranger à une possible piste de solution pour toi : http://forum.alsacreations.com/topic-4-79865-1-Centreruneimageavecease-outauseindunediv.html

Cependant, j'ai 2 questions :
1. Est-ce judicieux de t'orienter vers 100% d'un div de toute la hauteur de page ?
2. Pourquoi ne pas définir un "conteneur" aux dimensions strictes qui honorent une résolution d'img idéale, et apporte dès lors une solution éprouvée appréciable ?

Daigne visiter les solutions que je propose et lis-en librement le code-source :
http://sentrais.eu/test-position-img/diaporama.htm
http://sentrais.eu/test-position-img/diaporama-2.htm

A +.

@PapyJp,
je pense avoir rédigé finalement quelque chose qui réponde à ta préoccupation initiale. Exemple :
http://sentrais.eu/test-position-img/diaporama-3.htm
où d'abord je récupère par simple .js les valeurs absolues et quelconques des hauteur et largeur de la fenêtre du navigateur du visiteur.

Ensuite, j'affecte ces valeurs, ajoutées de l'unité "px", aux dimensions d'un conteneur d'img, avec correction de l'épaisseur des scrollbars horizontale et verticale pour les forcer à ne pas apparaître bêtement.

Voici le .js, rudimentaire or suffisant :

<script>
var conteneur=document.getElementById('conteneur');
var w=window.innerWidth;
var h=window.innerHeight;
var w=w-10; //prévenir le scrollbar horizontal
var h=h-10; //prévenir le scrollbar vertical

conteneur.style.width=w+'px';
conteneur.style.height=h+'px';
</script>

Mon exemple est un peu complexe et croisé dans le .css (j'y contrains notamment l'img de ne jamais dépasser les dimensions du conteneur donc de la fenêtre) :

<style>

body
{margin:0;font-family:arial,verdana;font-size:1em}

#conteneur
{display:inline-block;position:relative;width:100%;height:100%;margin:5px 0 0 0;background-color:#fff}

#conteneur img
{z-index:1;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;max-width:100%;max-height:100%;padding-left:5px}

#selection
{z-index:3;display:block;width:100%;position:fixed;bottom:5px;text-align:center}

#selection a
{padding:5px;border:1px solid #fff;margin-right:-1px;color:#fff;background-color:#888;cursor:pointer}

#selection a:hover
{background-color:#1d3}

.img0
{z-index:1 !important;opacity:0;transition:opacity ease 1s}

.img1
{z-index:2 !important;opacity:1;transition:opacity ease 1s}

</style>

Cela fonctionne très bien sous FireFox peu importe la fenêtre du navigateur (au besoin recharger la page après redimensionnement), et sans distorsion d'img. Tu remarqueras que mon exemple en ligne s'est assuré de proposer des images de tailles horizontale, verticale, petite, moyenne puis une qui soit grande.

Chaque img est toujours posée au centre v et h de la fenêtre dans les limites de celle-ci, c-à-d proportionnellement et sans overflow.

Uuuh ! j'ai presque l'impression d'avoir inventé un flexbox simplissime. A toi d'y apporter les ajustements nécessaires à ton projet, par exemple en déployant/réduisant opportunément ton slide en superposition sur toute la page disponible (en ce cas ton slide ou mon conteneur sera en position:fixed), avec un double-fond voilé intégral translucide ... Ca devrait avoir une belle allure.
Modifié par pictural (19 Oct 2016 - 08:24)

Merci d'avoir veillé aussi tard (ou de t'être levé aussi tôt) pour répondre à ce sujet.
Le but de cette discussion pour moi, c'est de trouver une solution sans js.
Cela fait 20 ans ou presque que je fais des pages HTML + JS et que je traite ce genre de problème par des scripts.
Depuis que je fréquente ce site et que je me suis décidé à moderniser ma techno j'essaie autant que possible d'éviter de faire par script ce qui peut être fait par CSS.
Je constate hélas assez souvent que malgré les efforts déployés depuis 15 ans par les équipes qui travaillent sur ce sujet il existe des choses qui ont l'air élémentaires et qu'on n'arrive pas à faire par CSS.
Comme je ne suis pas disponible aujourd'hui j'attends jusqu'à demain pour ajouter aux scripts qui font défiler les images les quelques lignes nécessaires à calculer la taille de celles ci, ce que le bon sens dit que ce devrait être faisable par CSS.
Mais pour avoir longtemps travaillé dans le domaine de la normalisation je sais par expérience que le bon sens n'est pas la vertu principale des normalisateurs!
Modifié par PapyJP (19 Oct 2016 - 08:29)

Pour l'instant j'ai exhumé de mes archive le script qui redimensionne les images, mais j'espères tou de même qu'il existe une solution CSS à ce problème.
Modifié par PapyJP (19 Oct 2016 - 13:00)