[Résolu] Flex et images

(reprise du message précédent)

Doublon
Modifié par PapyJP (30 Mar 2020 - 16:29)

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

Yordi a écrit :
Est-ce que ce code correspond à ce que tu cherches à faire ?

Bravo, c'est exactement je que cherchais à faire (pour Papy mais aussi en défi perso) mais que je n'ai pas réussi à conduire à terme sans bricolage.

En ce moment je suis à la ramasse pour ce qui est de la veille css : pourquoi faut-il un "min-height: 1px" pour faire fonctionner "object-fit: contain" ? (j'ai vu qu'une valeur de 0 ça marche aussi)
Modifié par Olivier C (03 Apr 2020 - 08:17)

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

Yordi a écrit :
Hello,
Un peu long à expliquer en détail, en gros, la valeur par défaut est min-width/min-height: auto

Oui, un "bug" qui n'en est pas un et qui me rappelle une publication d'il y a... plus de trois ans : https://raphaelgoetter.wordpress.com/2016/11/09/flexbox-min-width-0-is-the-new-zoom-1/

Ça ne nous rajeunit pas tout ça !

Merci Raphaël
J’avoue à ma grande honte ne pas comprendre grand chose à ce problème et surtout s’il existe ou non une solution.
Il est vrai que j’ai depuis des années une solution JavaScript et que c’est surtout par curiosité que j’ai essayé de voir dans quelle mesure la techno flex était en mesure d’apporter une solution.
Ma bible en la matière (CSS3 Flexbox d’un certain R.G) ne m’a pas apporté le secours espéré.
Bref je n’ai toujours pas compris comment faire, ou même tout simplement si c’est faisable.

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...

@JPB
Je l'ai mise sous cette forme, c'est à dire la possibilité pour l'utilisateur d'agrandir jusqu'à un facteur 3, recommandation que j'ai trouvée il y a longtemps sur ce site.
Pourquoi penses tu que ce n'est pas approprié ?

@Olivier
Désolé, je n'arrive pas à voir ce qui est sous CodePen, comme je l'ai expliqué si-dessus

PapyJP a écrit :
@Olivier
Désolé, je n'arrive pas à voir ce qui est sous CodePen, comme je l'ai expliqué si-dessus

Si tu parles de voir le rendu uniquement (avec le bandeau du site, on ne peut pas le virer) il faut remplacer le "pen" dans l'URL par "full".

Codepen offre aussi la possibilité de télécharger le code (donc le HTML, CSS, JS) pour le tester en local.

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

J'ai essayé de reporter tes recommandations dans mon code.
Le résultat est dans
1) HTML https://tests.osirisnet.net/monument/chaproug/@@chaproug.html?fr
2) CSS: https://tests.osirisnet.net/slideshow2.css
Bien entendu ça ne fonctionne pas, rien d'étonnant quand on ne comprend pas ce qu'on fait.

Merci beaucoup
ça semble marcher .
Reste pour moi à comprendre pourquoi
1) HTML https://tests.osirisnet.net/monument/chaproug/@@chaproug.html?fr
2) CSS: https://tests.osirisnet.net/slideshow2.css
Si j'osais
Mon script fait une chose supplémentaire que je ne vois pas comment faire en CSS:
Il regarde si le texte de <figcaption> tient sur une ligne:
- si oui, il laisse le text-align:center
- si non, il met le text-align:justify
Y a-t-il un moyen de faire ça en CSS ?

PapyJP a écrit :
Merci beaucoup

Si j'osais
Mon script fait une chose supplémentaire que je ne vois pas comment faire en CSS:
Il regarde si le texte de &lt;figcaption&gt; tient sur une ligne:
- si oui, il laisse le text-align:center
- si non, il met le text-align:justify
Y a-t-il un moyen de faire ça en CSS ?

Vu la structure, flex à nouveau

je tenterais :

figcaption {display:flex;justify-content:center;}
figcaption span {text-align:justify;}/*optionnel*/

le span est centré, jusqu’à ce qu'il occupe toute la largeur, text-align n'aura pas d'incidence avant.

voici une reprise de ton architecture avec juste flex pour le layout : https://codepen.io/gc-nomade/pen/bGdyyWO flex en imbrication sur main et figure/figcaption. un seul figcaption pour les 2 textes et quelques bordures. Si cela t'aide a mieux visualisé les effets de flex.
Modifié par gcyrillus (04 Apr 2020 - 12:59)