[Résolu] Flex et images

Après pas mal de peine, d'efforts et d'énervement j'ai fini par afficher ton code en "pleine page" (je mets des guillemets car ça ajoute un bandeau en tête)
En grand écran j'obtiens

sur petit écran


c'est trop loin de ce que je veux faire pour juger si c'est utilisable ou non.

J'ai essayé de reporter ton CSS dans ma page de test

/* Mise à jour 30/03/2020 16:52:51 */
@font-face {font-family: 'AdelonSerial-Medium';
	src: url('/webfonts/2F98F9_7_0.eot');
	src: url('/webfonts/2F98F9_7_0.eot?#iefix') format('embedded-opentype'),
		url('/webfonts/2F98F9_7_0.woff2') format('woff2'),
		url('/webfonts/2F98F9_7_0.woff') format('woff'),
		url('/webfonts/2F98F9_7_0.ttf') format('truetype'),
		url('/webfonts/2F98F9_7_0.svg#wf') format('svg');}
html {
	font-size:17px;
	font-family: AdelonSerial-Medium, Arial;
}

@media screen and (max-width:1024px) {
	html {font-size:1.7vw;}
}
@media screen and (max-width:705px) {
	html {font-size:12px;}
}

body {
	background:black;
	color:white;
	width:100vw;
	height:100vh;
}
main {
	text-align: center;
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100vw;
	height:100vh;
}
header {
	position:relative;
	text-align:center;
	font-size:1em;
	display: table;
	background:#DDD;
	padding:0.5em;
	border-radius:0.5em;
	color:#990000;
	margin:0 auto 2em;
	min-width:20%;
	flex-grow: 0 0 auto;
}
h1 {font-size:1em}
html h1:after {
	font-size: 0.9em;
	content:"Osirisnet Slideshow ©";
	display: block;
	margin:0.75em 0 0.25em;
}
html:lang(fr) h1:after {
	content:"Diaporama Osirisnet ©";
}
figcaption > span {
	display:block;
}

button.previous, button.next  {
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	border:none;
	background: transparent;
	color:gold;
	font-size:2em;
	cursor:pointer;
}
button.previous {
	left:-2em;
}
button.next {
	right:-2em;
}
#counter {
	position: absolute;
	background:transparent;
	color:gold;
	font-size:0.8em;
	bottom:-3.5em;
	left:50%;
	transform: translateX(-50%);
	border:none;
	padding: 0.4em;
}
#counter input {
	border:none;
	background: transparent;
	color:gold;
	text-align: right;
	width:1.25em;
	cursor:pointer;
	font:inherit;
}
html:lang(en) span:lang(fr), html:lang(fr) span:lang(en) {display:none;}
figure.cluster {padding:0;margin:0;text-align:center;}
figure.cluster > figcaption {display:none;}
figure.slide {display:none;}
figure.slide.active {
	display: flex;
	flex-direction:column;
	flex: 1 0 0;
}

figure.slide figcaption {
	font-size: 1em;
	color:gold;
	max-width:70vw;
	margin:auto;
	text-align: center;
}

figure.slide figcaption ~ figcaption {
	font-size: 0.9em;
}
figure.slide img {
	border-radius:0.5em;
	vertical-align:middle;
	margin:0.5em auto;
	cursor:pointer;
}

voir le résultat dans https://tests.osirisnet.net/monument/chaproug/@@chaproug.html?fr
Je me suis sans doute trompé dans le CSS

Hello,
Un peu long à expliquer en détail, en gros, la valeur par défaut est min-width/min-height: auto donc pas possible au contenu de se réduire pour s'adapter au parent mais le parent s'adapte au contenu. Je te propose de lire cette réponse sur stack overflow qui est très complète
Et voici la doc W3C

Hello Papy

Il me semble que Yordi t'a créé un codepen qui semble correspondre à ce que tu souhaites (avec l'aide de la propriété object-fit), non ?

En ce moment, je ne fait que passer en coup de vent : mes journées sont remplies à moitié par le boulot, à moitié par les devoirs des enfants et à moitié par les occupations à faire avec les enfants pour ne pas qu'ils nous rendent dingues ! (oui les journées sont longues)

Comme je l’ai dit plus haut, j’ai essayé de modifier mon CSS d’après le code de Yordi, sans succès
Mon fichier est toujours en ligne, j’attends une proposition de correction de qui voudra bien s’y coller
https://tests.osirisnet.net/monument/chaproug/@@chaproug.html?fr
En tant que retraité, mon confinement se traduit par du temps libre que je consacre à essayer de moderniser quelques parties de code.
Moins utile que de compenser les fermetures d'écoles...
Modifié par PapyJP (02 Apr 2020 - 20:29)

Merci à Yordi,

J'ai réussi à faire fonctionner le code avec une balise picture : CodePen : object-fit contain & picture

Il y avait une subtilité : j'avais cru comprendre que la balise picture ne devait pas recevoir de propriété css car elle s'effaçait derrière les propriétés du tag img, mais dans ce cas j'ai dû la raccrocher aux propriétés du tag figure pour que le code fonctionne...

Désolé encore une fois: ce que vous proposez n'est pas du tout ce que je veux faire.

Ce qui marche c'est https://tests.osirisnet.net/monument/chaproug/@chaproug_slideshow.html?fr

La question est:
Peut-on obtenir le même résultat sans appeler la fonction JavaScript à chaque affichage de slide et à chaque changement de taille de page ou d'orientation?

De toute façon -- pour des raisons trop longues à expliquer -- le code original est un HTML simplissime qui est mis en page par JavaScript, quelques lignes de JavaScript en plus ou en moins n'ont pas d'importance. Ce que je voudrais savoir, c'est s'il est possible en CSS de répondre aux specs suivantes:
1) le <header> de page est constant (sauf le numéro de slide qui est mis à jour par JavaScript)
2) le texte de la slide est variable, allant de rien du tout à plusieurs lignes de texte
3) les images sont de taille et d'orientation variable
4) la taille de l'image affichée ne doit pas excéder la taille réelle
5) l'image doit être cadrée en haut
Modifié par PapyJP (03 Apr 2020 - 23:28)

@papy : le script que j'ai donné (copié sur celui de Yordi) remplit les critères 2 à 5, donc sans le header, il suffit de l'adapter à ton contexte. Pour la hauteur totale avec le header, à la place d'un 100vh, on peut par exemple faire un `height: calc(100vh - <hauteurDuHeader>)` si l'on veut éviter que le header soit incorporé au sein du module.

Par contre, pour ton exemple "qui marche", les images peuvent dépasser en hauteur de ta page (image n°6 sur mon Android par exemple).
Modifié par Olivier C (03 Apr 2020 - 21:15)

Olivier C a écrit :
Par contre, pour ton exemple "qui marche", les images peuvent dépasser en hauteur de ta page (image n°6 sur mon Android par exemple).

Merci de me signaler ce problème. Je vais essayer de le traiter avant de me plonger dans ta solution

Le problème a été corrigé: j'avais mis l'eventlistener sur document.body au lieu de window