Adapter une image en hauteur à la resolution

Bonjour tous le monde,

J’aimerai mettre plusieurs images à la suite horizontalement de façon à avoir une scroll horizontale, jusque là tout va bien.

Ensuite j'aurai aimé que cette liste d'image s'adapte sur la hauteur pour avoir le même résultat sur n’importe quelle résolution d’écran (smartphone et tablette inclus)

Un grand merci !!!

Bonjour,

Tu peux faire ça avec du JQuery par exemple :
var Sy = $(window).height();// hauteur de l'écran

puis adapter les images à la hauteur ainsi;

$('#nom_id_image').css('height',Sy+'px');

ou créer un div sur la hauteur avec Sy et mettre ton img avec style='height:100%;'
exemple dans le DOM :
<div id="machin" style="position:absolute;width:1px;height;1px;"><img src="mon_image.jpg" style="position:absolute;width:100%height:100%></div>

puis en jQuery:
var Sy = $(window).height();// hauteur de l'écran
var Sx = $(window).width();// largeur de l'écran
$('#machin').css('height',Sy+'px');
$('#machin').css('width',Sx+'px');

Voilà!

re,

il y a une erreur de syntaxe dans ma démo ici

<div id="machin" style="position:absolute;width:1px;height;1px;"><img src="mon_image.jpg" style="position:absolute;width:100%height:100%></div>

il faut mettre :

<div id="machin" style="position:absolute;width:1px;height;1px;"><img src="mon_image.jpg" style="position:absolute;width:100%;height:100%;"></div>

désolé

Parfait je vais tester ça et juste une question

Admettons que je crée une page, que j'y insère une image centrée et resizèe automatiquement en hauteur, jusque la tout va bien et que dans cette page je place les liens suivants : "previous, next et close" (jusque là tout va bien aussi)


Ma question est : A votre avis, je devrais créer une page html ou php pour chaque image qui apparaitra une fois que l'on clique sur les liens previous ou next ou il y a un moyen de contourner ça de mettre un lien vers les autres images sans leur créer une page propre ?


Un grand merci Navi et les m'sieur qui vont participer à ce post
Modifié par kodjoed (31 Jul 2013 - 00:30)

À noter que le très long code qui plus est en JQuery et avec certaines aberrations revient à

<img src="image1.jpg" alt="" />

html, body {margin:0; height:100%}
img {vertical-align:top; height:100%}

De plus, je ne pense pas que ça soit très bon de redimensionner la largeur et la hauteur de ton image selon la taille de ton navigateur. D'une, si l'image est plus petite que l'écran, elle se pixelisera mais surtout quand les dimensions de l'image dépendent de celles du navigateur, elle perdra ses proportions.

Pour la dernière question, tu devrais jeter un coup d’œil aux galeries d'images en JS. Pas la peine de créer une page pour chaque image tu t'en sortiras pas.

tu as raison mais j'ai mis un max-height donc je pense que c'est bon pour le redimentionnement des images Zelalsan ?



Et pour une galerie d'images je vais en chercher une simple, juste pour savoir, est ce que je pourrais donner cette fonction aux images que ma galerie proposera :

html, body {margin:0; height:100%}
heightmax {vertical-align:top; height:100%}

<div id=heightmax">
<img src="image1.jpg" alt="" />
</div>

Modifié par kodjoed (31 Jul 2013 - 18:27)

Oui tu pourras garder ce code mais perso je n'aurais pas fait comme ça. À mon avis au lieu de mettre un max-height tu devrais juste redimensionner la hauteur et laisser la largeur automatique pour garder les proportions de ton image.

c'est intéressant Zelalsan, si ce n'est pas trop long pour toi, tu peux me dire qu'est ce que tu aurais fait ?

car mettre ton code sur une petite galerie sans grande complication me parait déjà simple


simplement redimensionner la hauteur n'est pas faux !!! je vais faire ça