Ajuster la taille d'une image à celle de l'écran

Bonjour à tous,

Je viens de m'inscrire au forum après avoir sournoisement utilisé les nombreuses ressources du site pour monter mes pages... MERCI !

J'ai dorénavant un problème qui semble insoluble et pourtant je suis sure que quelqu'un avec un cerveau plus gros que le mien et plus d'expérience que moi pourrait résoudre la chose...

J'ai une page qui utilise les "frames". La colonne de gauche affiche les aperçus des images. Le bandeau en haut à droite affiche un titre. Le volet (principal) en bas à droite affiche l'image.

Je voudrais que la taille de l'image s'ajuste à la taille de l'écran. Tout ce que j'ai essayé (ne me demandez pas quoi, cela remonte à 3 mois) a échoué. J'ai récemment découvert qu'il serait possible d'utiliser un "module" qui contiendrait l'image. Du coup, on n'aurait plus qu'à réduire le module... mais je n'arrive pas à l'utiliser... bouh.

Aidez-moi, je commence à croire que mon cas est désespéré...

En tout cas, merci énormément pour le site. Je suis passée du chteumeuleu au ceusseusseu presque en totalité... youpi !

Meg

Bonjour,

img {
width: 100%;
height: auto;
}

Mais c'est à utiliser avec précaution:
- risque de pixelisation et de rendu dégradé en grande résolution si la qualité de l'image est insuffisante.
- à l'inverse, risque de téléchargement d'images inutilement lourdes en petite résolution.

Il est généralement préférable d'optimiser la taille et la qualité des images lors de leur mise en ligne, et de s'en tenir là.

(A ce propos: cette technique est fortement déconseillée pour obtenir à l'inverse un affichage de "vignette". Cf bonnes pratiques qualité Opquast)
Modifié par Laurent Denis (29 Jul 2006 - 17:00)

Coucou Laurent Denis,

Mes pages sont, dans un premier temps, destinées à une simple utilisation Intranet... sur mon réseau perso. Je ne cherche donc pas à ménager la bande passante. A terme, les bandes passantes seront délirantes et la mise en ligne ne posera aucun problème.

Pour ce qui est du img{width: 100%;}, je l'avais utilisé, mais puisque je veux afficher, à gauche de l'écran, un bandeau vertical (en valeur absolue) des aperçus, si je mets 100%, ça va dépasser de l'écran, non... en tout cas, c'est ce que j'ai observé des mes essais précédents...

Merci de ta réponse si rapide !

Meg

Tu peux modifier le pourcentage à ta guise, ou inclure l'image dans un conteneur en flux (<div>) dont la largeur dépendra automatiquement de celle, en flottant à sa gauche, de ton bandeau d'aperçu, etc. Les possibilités ne manquent pas et cela ne pose pas de difficultés puisqu'il s'agit simplement d'obtenir un conteneur fluide.

La question serait plutôt, de ce point de vue, de trancher entre un redimensionnement via la largeur et un redimensionnement via la hauteur (le but étant d'éviter le scroll, je suppose). Le résultat d'un dimensionnement en largeur peut être amusant, par exemple, sur un écran 16/9. max-width, min-width, etc. peuvent être utiles (en dehors d'IE, bien-sûr).

Pour les "bandes passantes [ qui ] seront délirantes", le problème est un petit peu plus varié et complexe que cela
Modifié par Laurent Denis (29 Jul 2006 - 17:24)

Salut,

Pas sur de bien comprendre la question. Mais si l'image dont il est question est celle contenu dans le "volet principal", alors la solution simple et logique serait :

img {
max-width:100%;
height:auto;
}

C'est parfait pour firefox et opera mais ça ne fonctionne pas avec IE. Donc pour limiter la casse en passant par les commentaires conditionnels une solution javascript en passant par des id :
html :

<div id="conteneur_img_test">
<img src="image.jpg" id="img_test">
</div>

css

<!--[if IE]>
<style type="text/css">
img {
width:expression(document.getElementById('conteneur_img_test').offsetWidth > document.getElementById('img_test').offsetWidth? document.getElementById('img_test').offsetWidth+"px" : "100%" ); 
}
</style>
<![endif]-->

Maintenant dans le cas de js inactif (on ne parle évidemment que d'IE), deux possibilités :
1. Tu acceptes que l'image soit rendues plus grandre que sa taille réelle dans le cas de grandes résolutions d'écran (avec pixellisation donc) pour qu'elle s'adapte aussi dans le cas inverse et dans ce cas tu rajoutes :
css

<!--[if IE]>
<style type="text/css">
img {
width:100%;
width:expression(document.getElementById('conteneur_img_test').offsetWidth > document.getElementById('img_test').offsetWidth? document.getElementById('img_test').offsetWidth+"px" : "100%" ); 
}
</style>
<![endif]-->

2. Sinon tu laisses l'image non adaptable dans le cas IE+js inactif et tu ne rajoutes rien à la css précédemment indiquée :

<!--[if IE]>
<style type="text/css">
img {
width:expression(document.getElementById('conteneur_img_test').offsetWidth > document.getElementById('img_test').offsetWidth? document.getElementById('img_test').offsetWidth+"px" : "100%" ); 
}
</style>
<![endif]-->

<edit>
Il reste néanmoins un petit souci, le height:auto; dans :

img {
width:valeur_déterminée;
height:auto;
}

n'est pas reconnu par les versions anciennes de IE donc déformation de l'image à envisager.
</edit>
Modifié par clb56 (29 Jul 2006 - 18:23)

Je relis mon message et conviens qu'il est peu clair. Donc, voici une image de ce que je cherche à avoir :
http://perso.orange.fr/mesmegas/Exemple.jpg

Il y a quatre éléments qu'il faut faire tenir sur un écran :
- Un bandeau horizontal de titre en haut à droite
- Un bandeau vertical d'aperçus à gauche (le scrollbar doit être contenu dans l'espace réservé à ce seul bandeau)
- Un mini-bandeau en bas à gauche pour la navigation
- Le reste de la page pour afficher l'image (il faut absolument éviter le scrollbar)

Je me suis remise à l'oeuvre et n'arrive même pas à structurer la gauche de ma page. voici mon code :

CSS :

.flottante {
margin-right: 4px;
margin-left: 4px;
margin-top: 4px;
margin-bottom: 0px;
float: left;
width: 100px;
}
.conteneur {
width: 216px;
height: 100%;
}
.spacer {
clear: both;
}

.boutons {
  position: absolute;
  bottom: -5px;
  left: 4px;
  background-color: #ffff00;
}

HTML :

<div class="conteneur">
            	<p class="flottante"><a href="Copie de index.html" class="Lien_Image"><img src="Japon2006/00_Apercus/05_Restaurant_apercu_02.jpg"></a></p>
		<p class="boutons"><a href="Copie de index.html" class="Lien_Image"><img src="Boutons/Bouton_Sommaire_Album_Photo.png"></a></p>
<div class="spacer">&nbsp;</div>
	</div>

Comment pourrais-je placer le bloc de boutons en bas à gauche de l'écran et faire que le bandeau d'aperçu s'adapte ensuite avec un scrollbar ?
Modifié par Igor (30 Jul 2006 - 16:30)

@Meg123
Merci d'éditer ton message pour présenter lisiblement ton code en encadrant celui-ci par [ code] et [ /code] (sans espaces).

Bonjour Igor,

Je suis désolée de ne pas avoir utilisé les balises.
Malheureusement, je n'arrive pas à éditer mon message. Le bouton "Editer" n'apparaît pas. ni non plus le lien "Profil" d'ailleurs. pourtant, je me suis connectée... Je ne comprends pas.

Meg

Merci Igor,

Cela dit, si quelqu'un a une explication pour que j'édite moi-même mes messages, je prends .

Je ne peux pas procéder comme indiqué dans la FAQ car je pense que le site ne prend pas en compte mon login. Je dois me loguer en même temps que je poste, mais le logue via la page d'accueil ne semble pas fonctionner...
http://forum.alsacreations.com/faq/#item22

Merci.

Meg