5568 sujets

Sémantique web et HTML

Image en pleine fenetre

Bonjour,
je sèche sur un truc facile (?)
Je voudrais une image qui prennent toute le fenêtre.
Plus précisément, pour éviter les déformations trop importantes, dont la taille est déterminé par une largeur = 100% de la fenêtre ; (la hauteur suit cette contrainte)

Et si possible, qui marche sous tous les navigateurs...
Pour l'instant, mon image reste à 100% de sa taille, mais pas de la taille de la fenêtre.
J'ai testé sous firefox/windows ; si possible je ne voudrais pas d'une image de fond, mais ça pourrait faire l'affaire.
Voici le code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<?xml version="1.0"?>
<head>
<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%
}
-->
</style>
</head>
<BODY>
<center>
<img src='schro1.jpg'  height=100% alt='image est là'>
</center>

</BODY>
<HTML>

merci beaucoup !!

PS : mon code est à base de :http://blog.alsacreations.com/2004/05/13/3-height
Modifié par Factran2 (18 Sep 2008 - 19:58)
Bonjour et bienvenue Smiley cligne
sois attentif, tu as pas mal de problème dans ton code (déclaration xml mal placé et inutile, pas de balise html ouvrante, balise fermante html incorrecte) et des erreurs syntaxiques : en xHTML tous les balises doivent être écrites en minuscule et les attributs HTML entre double quotes.

Eviter autant que possible les élément dépréciés comme "center" et privilégier CSS pour la mise en forme.

Tu as un générateur de squelette qui permet d'éviter ce genre d'erreurs: http://css.alsacreations.com/outils/squelettor/index.php


Tu ne peux pas mettre d'unité de taille (% ici) dans les attributs HTML.
Conserver les attributs de taille intrinsèque de l'image.

Code corrigé (en supposant que le doc en en français et que tu n'as qu'une seule image)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
<!--
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
img {height: 100%; width: 100%}
-->
</style>
</head>
<body>
<p style="text-align:center"><img src="schro1.jpg"  height="" width="" alt="image est là" /></p>
</body>
</html>

Modifié par Hermann (19 Sep 2008 - 21:16)
Vraiment génial, merci, je vais étudier ça en détails, histoire d'éviter de refaire le ramassis de connerie de la question !
Merci !
Sujet clos
Aller à