[Résolu] Image qui profite du maximum d'espace

Bonjour à tous !

J'ai mis une image de ce que j'essaie de faire

Concrètement, je voudrais avoir au centre de ma page une image qui prend le maximum d'espace (moins les espaces utilisés par les blocs en haut, en bas, à droite et à gauche).

La largeur et la hauteur de l'image n'est jamais connue.

Je n'arrive pas à lui spécifier genre 100% de largeur maximum (ou de hauteur) dans un espace finalement confiné... l'image dépasse la hauteur limite de la page en final. C'est bizarre. Elle ne tient pas compte de la taille des blocs.

Des idées de comme construire ça ?

Merci beaucoup !
Alex


Modifié par noob59 (01 Jun 2011 - 16:09)

Bonjour,
Pourrait-on disposer de ton code ou d'une page en ligne?

Hello,

Je viens de tomber sur ça :
http://www.jeuxvideo.com/screenshots/images/00036/00036707_001.htm

L'idée est la même. Profiter au maximum de l'espace tout en ayant une partie haute et basse de tailles fixes.

J'ai beau retourner mon code dans tous les sens je n'arrive pas à grand chose. J'imagine que du JS serait plus qu'utile mais là je vais sécher du coup

Alex

Je reformule ma demande : "Pourrait-on disposer de ton code ?"
Je signale quand même que les contraintes de ton dernier post sont beaucoup moindres que celles de ton premier.

Yop,

j'essaie d'y aller étape par étape
http://autohd.fr/test/demo.html

Donc déjà, premier problème, l'image prend davantage de hauteur que la hauteur de la page :o

Je bosse jamais en % j'ai vraiment du mal !

Alex

noob59 a écrit :
l'image prend davantage de hauteur que la hauteur de la page

Normal, ton image fait 1600px en hauteur, 2560px en largeur et pèse 1333Ko !

Quel rapport avec le poids (d'autre part, c'est une démo...).

C'est bien l'intérêt... si l'image était petite, elle ne dépasserait pas...
Ce que je cherche à faire : faire prendre à une image le maximum d'espace qui lui est alloué dans un espace restreint.

Comme le lien sur le site de jeux vidéo.
Leur image fait 1280x720 et non, elle ne dépasse pas de la fenêtre. Elle prend l'espace maximum qui lui est alloué entre la partie haute et la bannière en bas du site. Et elle se redimensionne donc en fonction de la taille du navigateur, "en live".

Pas de rapport avec le poids. C'était juste pour attirer ton attention sur la lourdeur de l'image (et donc sur le temps de chargement).

Il est clair que le site que tu mentionnes utilise jQuery pour afficher cette image centrale réduite. Il s'agit en fait d'une visionneuse. Il suffit pour s'en convaincre de lister dans WebDevelopper de Firefox les nombreux fichiers js associés à la page.

Si tu mets la main dessus, tu auras ce que tu cherches !
Modifié par lddsoft (28 May 2011 - 18:21)

Merci

Donc voilà en fouillant ce que "je" suis arrivé à faire :
http://www.autohd.fr/test/demo.html

Maintenant, je suis vraiment une grosse bille en JS.

L'objectif est d'arriver à dire que la taille de l'image ne doit pas être de 100% (que ce soit hauteur ou largeur) mais cette taille en pixels à laquelle on soustrait un certains nombre de pixels pour la hauteur (qui correspond à la hauteur du header et du footer ; tailles qui sont pour le coup connues) et pareil pour la largeur.

Any idea ?
Thx !

Alex

Ok résolu. J'ai tout fait avec Jquery. C'est nice.

Hello,

Et voici par exemple, le résultat final. Merci encore.

http://fr.dokoto.net/view/541

:)