28172 sujets

CSS et mise en forme, CSS3

[Résolu] Adaptation de la taille d'une image à la taille de l'écran

Bonsoir à tous
J'ai un programme qui affiche des images popup qui sont sensées s'adapter à la taille de l'écran
Sur la page de test suivante http://paralletes.free.fr/tests/TestImage.htm
On voit que la première image ne s'adapte pas correctement si on l'affiche sur une tablette en mode paysage.
Ce n'est pas bien gênant, car il est naturel de mettre l'écran en mode portrait pour une image de ce type, mais j'aimerais trouver une meilleure solution.
Merci de votre aide.
Juste une petit correction... il est faux de croire qu'il est "naturel" de prendre une tablette en mode portrait... personnellement je ne prend jamais la mienne en mode portrait, toujours en mode paysage sauf quand on on m'y force et je déteste ça.

Ensuite, je pense que ceci pourrait peut-être t'aider: https://la-cascade.io/utiliser-css-object-fit/
Merci Julie
Il est hors de question de mettre une dimension en dur dans mes pages, ce qui semble nécessaire avec object-fit si j'ai bien compris.
Les propriétés CSS ont été définies avant que les tablettes deviennent importantes dans la navigation sur internet et rendent en pratique indispensable que les dimensions d'image soient exprimées en fonction de la taille du conteneur.
J’avoue ne pas bien comprendre la question. Tout d’abord parce que votre exemple n’illustra pas le cas puisque les images sont ouvertes dans une nouvelle page de navigateur. Ensuite, parce que dans votre exemple, la première photo (en portrait) s’affiche bien sans scroll sur une tablette en mode paysage…
Modérateur
Bonjour,

Je ne sais pas j'ai bien tout compris mais pourquoi ne pas simplement utiliser l'unité VW/VH pour définir la taille des images ?
Derwoed a écrit :
J’avoue ne pas bien comprendre la question. Tout d’abord parce que votre exemple n’illustra pas le cas puisque les images sont ouvertes dans une nouvelle page de navigateur. Ensuite, parce que dans votre exemple, la première photo (en portrait) s’affiche bien sans scroll sur une tablette en mode paysage…

Merci de votre intérêt pour mon problème
En fait, les images sont ouvertes par un script PHP appelé par un script JS qui lui fournit les dimensions de l'écran, informations qui ne sont directement accessibles que par JS.
Le script PHP compare la taille de l'image à cette de l'écran, et en déduit: la taille de la fenêtre qui va s'ajuster à celle de limage par

<body onload="window.resizeTo(...,...);" >

Ce bout de code fonctionne depuis pas mal de temps lors de l'affichage sur un ordinateur. Cela permet à l’utilisateur (surtout s'il dispose de deux écrans comme c'est mon cas) de voir une image en détail dans une fenêtre tout en continuant à lire le texte qui l'accompagne dans une autre de,être.

Les tablettes ne permettent pas -- à ma connaissance -- d'avoir des fenêtres de taille différente de celle de l'écran. Par contre elles disposent de la possibilité de changer rapidement l'orientation, ce qui n'est pas facilement faisables avec un écran d'ordinateur.
Je cherche donc à modifier au minimum mon code PHP tout en affichant une image qui s'adapte au mieux à la taille de l'écran et à son orientation.
Sur mon iPad, l'image n°1 (celle qui est en format portrait) le programme donne les résultats suivants:
1) si la tablette est en mode paysage l'image s'affiche correctement et elle reste correcte si on tourne la tablette en mode portrait
2) par contre si je lance l'affichage au moment où la tablette est en mode portrait, elle s'affiche correctement, mais si ensuite je bascule en mode paysage, le bas l'image est coupé.
C'est manifestement un un problème de CSS qui ne redimensionne pas correctement l'image, et c'est sur ce point que je demande son aide à la communauté, sachant encore une fois que ce n'est pas très important fonctionnellement, puisque le problème n'apparaît que si on bascule la tablette.

J'espère avoir été clair.
Salut Papy,

Je vois très bien ce que tu veux dire. J'ai trouvé une solution à cette problématique il y a peu mais, et c'est ballo, je n'est plus de connexion internet que via mon mobile... Donc pas de démo à te montrer pour l'instant Smiley decu

En gros : chez moi pas de nouvelle fenettre mais une popin dans laquelle est clonée l'image via la fonction .clone() de jQuery.

Pour le positionement. Elément parent de l'image en position absolute et display flex. Top, bottom, left et right à 0. Pour l'image : max-height à 100% et vertical-align:middle.
Modifié par Olivier C (25 Sep 2015 - 16:38)
Olivier C a écrit :
Salut Papy,

Je vois très bien ce que tu veux dire. J'ai trouvé une solution à cette problématique il y a peu mais, et c'est ballo, je n'est plus de connexion internet que via mon mobile... Donc pas de démo à te montrer pour l'instant Smiley decu

En gros : chez moi pas de nouvelle fenettre mais une popin dans laquelle est clonée l'image via la fonction .clone() de jQuery.

Pour le positionement. Elément parent de l'image en position absolute et display flex. Top, bottom, left et right à 0. Pour l'image : max-height à 100% et vertical-align:middle.

C'est également ce que j'avais fait d'abord, mais par définition un "popIN" est à l'intérieur de la fenêtre, ce qui n'est pas ce que l'on désire faire quand on a un ordinateur avec deux écrans. Il est vrai que ce n'est pas le cas pour les tablettes, mais on se retrouve avec le problème de détecter à coup sûr la nature du terminal.
Je vais faire de nouveaux essais sur le CSS de la page et de l'image quand j'aurai un peu de temps.
Voici mon dernier essai:

body {
    width: 100%;
    height:100%;
    box-sizing: border-box;
    background-color: #FFFFFF;
    margin: 0px;
    font-family:Geneva,?Arial,?Helvetica,?sans-serif;
}
figure.container {
    width:90%;
    margin:auto;
    height:90%;
    display:inline-table;
    text-align:center;
    color:rgb(153, 0, 0);
    font-size: 16px;
    font-weight:700;
    padding:1.0em;
}
figure.container img {
    display:block;
    margin:1.0em auto;
    max-width:90%;
    max-height:90%;
    vertical-align:middle;
}

Note: il y a parfois du texte, d'où le choix d'une balise <figure> et les informations de font, color, etc.
Je ne suis jamais arrivé à faire en sorte que les "max-height" fonctionnent: ça déborde toujours.
J'ai essayé de mettre max-height à 20% dans l'image, ça n'a aucun effet.
Il doit y avoir un savoir faire particulier sur ces problèmes de hauteur que je ne maitrise pas.
De même les "display:table-xxx" me semblent tout à fait ésotériques
Un lien vers un document pour m'éclairer?
Ha ! Voilà ! Avec le CSS c’est plus clair…

Alors votre problème vient du fait que votre balise <html> n’a pas de hauteur. En effet, pour que le navigateur calcul la hauteur d’un élément avec une hauteur en pourcentage, il faut que son parent ait une hauteur fixe (logique, 90% de rien ou 90% de 90% ne donne rien). Donc, soit ce parent à une hauteur en pixel, soit il a une hauteur en pourcentage mais a lui-même un parent avec une hauteur fixe… Dans votre cas, vous dites que <img> fait 90% en hauteur de <figure>, qui fait 90% en hauteur de <body>, qui fait 100% en hauteur de … rien ! Son parent <html> n’a pas de hauteur ! Du coup, il suffit de dire que <html> fait 100% de son parent. Comme le navigateur connaît la hauteur en pixel de la fenêtre, le tour est joué.

PS : pour le display: table (à mon avis inutile ici), recherchez sur ce site, il y a sûrement un article qui vous répondra.

PPS : à mon avis, à moins que votre application ne soit utilisée que par vous, forcer l’ouverture dans une fenêtre parce que VOUS avez 2 écrans est un mauvais calcul. Je vous conseillerais de faire 2 boutons offrant le choix à l’utilisateur final…
Modifié par Derwoed (27 Sep 2015 - 12:34)
@Derwoed
Effectivement, je croyais avoir mis un html {width:100%;height:100%;} et je ne l'avais pas fait!
Ce site existe depuis 15 ans, les popup sont la fonctionnalité de base de ce site, je ne vais pas semer le souk en changeant ça!
@Nerva c'est quoi une "lightbox"?

J'avoue qu'il ne soit pas évident de faire une chose aussi simple que d'afficher bêtement "au mieux" une image dans une fenêtre est un sujet de réflexion et de perplexité....
Je ne pense pas que mettre un height: 100% à ton CSS casse quoique ce soit… Dans le doute, essaye, cela ne te coûtera pas grand chose…

Sinon, régler le with à 100%, dans ton exemple ne sert à rien. Un bloc par défaut fait 100% de large…

Voici ton code CSS corrigé et légèrement allégé :

* {
  box-sizing: border-box;
}
  
html {
  height: 100%;
}
body {
    height:100%;
    background-color: #fff;
    margin: 0px;
    font-family:Geneva, Arial, Helvetica, sans-serif;
}
figure.container {
    margin:auto;
    height:100%;
    text-align:center;
    color:rgb(153, 0, 0);
    font-size: 16px;
    font-weight:700;
    padding:1.0em;
}
figure.container img {
    max-height:90%;
}


Par contre, si tu le reprends, méfies-toi du * {box-sizing: border-box;} qui pourrait casser ton site s’il n’est pas prévu pour… J’ai par ailleurs tout mis à 100% de haut sauf l’image.

Enfin, une lightbox est un type de popin affiché grace à du JS et popularisé il y a quelques années grâce à des framework JS spécifiques puis des plugins pour frameworks plus génériques (jQuery…)
Merci beaucoup, je vais tester cela demain matin.
S'agissant d'une fenêtre indépendante, il n'a pas grand chose à casser.... Encore un intérêt de faire un popup.
Sujet clos
Aller à