1485 sujets

Web Mobile et responsive web design

[Résolu] Afficher une image

Bonjour

Un court schéma valant mieux qu'un long discours, voici ce que j'essaie de faire:
http://paralletes.free.fr/tests/photo/Image4.jpg
Il s'agit d"afficher "au mieux" une image dans une page qui prenne tout l'écran, quelle que soit la taille de l'écran, sachant qu'il y a de nombreuses images à afficher de cette manière, qui ont des tailles très différentes, certaines en paysage, certaines en portrait.

Contrainte:
Ces images doivent également pouvoir s'afficher sur des navigateurs anciens, voire périmés, car le site en question a des habitués sur l'ensemble du globe, il ne faudrait pas introduire une régression pour faciliter la consultation sur tablettes et téléphones.
SI je ne trouve pas de solution CSS, je ferai un script en JS, mais je préfère vous demander votre aide pour éviter d'en arriver à cette extrémité, je suis sûr que quelqu'un a une solution toute prête...

Merci de votre aide
Modifié par PapyJP (31 Oct 2015 - 13:53)
gc-nomade a écrit :
bonsoir,

a défaut de ton code, une question: as tu tenter le 
img {width:100%;}

?

voici de quoi faire joujou:
http://paralletes.free.fr/tests/TestSlide.htm
Ce n'est bien sûr pas la solution, c'est ce dont je pars.
La question est comment régler le CSS pour que la taille de l'image soit ajustée aux dimensions de la fenêtre, quelles qu'elles soient et qu'on voie le titre en haut, le commentaire en bas, etc et l'image complète dans sa fenêtre.
Comme j'ai dit plus haut, je ne pense pas pouvoir utiliser des flexbox, qui pourtant sont faites pour ça, de façon à pouvoir afficher cette images sur de vieilles versions de navigateurs.
Mais on pourrait accepter quelque chose de moins bien sur les vieux navigateurs, par exemple une image qui déborde avec barre de navigation, l'essentiel étant que l'on ait bien un affichage sans débordement sur les navigateurs récents, y compris les tablettes Apple et Android
Je vois bien que si je réduis le max-height:96%; à quelque chose de plus petit, ça devrait coller, sur cet exemple, mais quid si on met 12 lignes dans le commentaire en bas de page?
Modifié par PapyJP (01 Nov 2015 - 13:10)
gc-nomade a écrit :
tu peut essayer de partir sur un display:table et height:100%; puis laisser faire avec un max-height/width à 100% pour l'image dans un paragraphe.

l'idée: http://codepen.io/anon/pen/RWJzer

Merci beaucoup, je vais essayer ça et je vous dis quoi
Modifié par PapyJP (02 Nov 2015 - 11:52)
Tout se passe comme si l'image se redimensionnait sur la taille de body et pas celle de <p>
JENCAL a écrit :
c'est normal, c'est du position absolute.

ça semble "normal" sous Chrome mas pas sous FireFox...???
En tout cas je n'ai pas de solution à mon problème.
Une meilleure idée?
J'ai trouvé une solution en mettant l'image en background

{
    background:white url('http://paralletes.free.fr/tests/photo/Image6.jpg') no-repeat center;
    background-size:contain;
    height:100%;
}

ça semble fonctionner sur les différents navigateurs avec lesquels j'ai fait le test.
voir http://paralletes.free.fr/tests/TestSlide3.htm
Question aux experts: que se passera-t-il si un utilisateur a un navigateur ancien, par exemple IE8?
Après des heures de recherches, au cas où ça intéresserait quelqu'un, j'ai trouvé l'explication suivante:
Sous Chrome, si on définit une <div> ou une <section> avec "display:table-row;position:relative;", il semble qu'il ignore le "position:relative;", sachant qu'effectivement les balises <tr> ne sont que des conteneurs de cellules, "display-table;" rend la section également incapable de servir de paositionnement à des élements absolus.
Le résultat est que le "position:absolute;" qui suit est considéré comme relatif à l'élément au dessus, dans mon cas à <body>.
Pour obtenir le résultat que je désire, il faut mettre une <div> intermédiaire avec "position:relative;"

<section id="slideContainer">
    <div>
        <div id="imageContainer">
            <div id="SLIDESIMG">&nbsp;<div>
        </div>
    </div>
</section>

et 

#slideContainer {
    height:100%;
}
#slideContainer > div {
    position:relative;
    height:100%;
}
#imageContainer {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}
#SLIDESIMG {
    margin:auto;
    text-align:center;
    background:transparent url('.........') no-repeat center;
    background-size:contain;
    height:96%;
    width:96%;
}

Maintenant ça marcherait peut être en mettant une image au lieu d'une div avec background, mais je crois que je vais en rester là!!!
Sujet clos
Aller à