Bonjour à tous !
Je suis sur un projet en html5 css3 depuis quelques temps déjà et je fais face à un problème que je n'arrive pas à résoudre :
Je veux que la bannière de mon site, qui est une image de 2000x500px (plus large que la majorité des écrans pour éviter qu'elle s'étire), prenne toute la largeur de la page, mais, que sa hauteur, augmente en conséquence, c'est à dire que l'image conserve tout de même son ratio original, c'est à dire 4:1.

Voici le code html correspondant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
	<head>
		<meta charset="utf-8" />
		<title>Bordershield</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<link rel="icon" type="image/x-icon" href="favicon.ico" />
	</head>
	<body>
	<center>
		<header>
		<a href=page_daccueil.html style="display:block;width:100%;height:100%;"/>
		</header>
		<div id="bras" >
			<div id="menu" >
				<p><FONT face="Tahoma">
				<a href=page_daccueil.html class="surlignage"><FONT color="white">Accueil</FONT></a><br/>
				<a href=Synopsis.html class="surlignage"><FONT color="white">Synopsis</FONT></a><br/>
				<a href=Personnages.html class="surlignage"><FONT color="white">Personnages</FONT></a><br/>
				<a href=Monstres.html class="surlignage"><FONT color="white">Monstres</FONT></a><br/>
				<a href=Carte_du_monde.html class="surlignage"><FONT color="white">Carte du monde</FONT></a><br/>
				<a href=Histoire.html class="surlignage"><FONT color="white">L'Histoire</FONT></a><br/>
				<a href=Auteurs.html class="surlignage"><FONT color="white">Auteurs</FONT></a><br/>
				</FONT></p>
			</div>
			<div id="compteur" >
				<img src="http://services.supportduweb.com/cpt_global/91594-11.png" alt="Compteur Global" /></a>
			</div>
		</div>
		<div id="jambe">
			<div id="contenu">
				<center>
				<p><FONT size=4; face="Tahoma"; color=#E3C116>
				<FONT size=6><h1>Accueil</h1></FONT>
				Bordershield est un Roman de Daelia, en coopération avec Pixelon.<br/>
				Il est actuellement en cours, et nous divulguerons les informations à son propos au fur et à mesure de son écriture.<br/>
				</FONT></p>
				</center>
			</div>
			<div id="piedpage">
				<span style="background:rgba(120,120,120,0.7)"><FONT color="white">
				Cookie corporation
				</span></FONT>
			</div>
		</div>
	</center>
	</body>
</html>
et le css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
html { 
  margin:0;
  padding:0;
  background: url(fond_body.jpg) no-repeat center fixed;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
body { 
	margin:auto;
	overflow:auto;
	max-width:1366px;
	min-width:900px;
	}
 
header {
	margin-left:20px;
	background:url(Banniere_site.jpg) no-repeat;
	background-size: 100% 100%;
	height:350px;
	overflow:auto;
	box-shadow: 3px 3px 3px black;
	}
 
a.surlignage:link {text-decoration:none;}
a.surlignage:visited {text-decoration:none;}
a.surlignage:hover {text-decoration:underline;}
 
a.pages{color:#E3C116;}
 
img.contour {border:2px solid black;}
 
#piedpage, #compteur, #partiegauche, #bras, #menu , header {
	margin:10px;
	}
 
/*Partie de gauche*/
#bras {
	width:200px;
	float:left;
	}
#menu {
	text-align:left;
	padding:10px;
	padding-left:30px;
	margin-top:0px;
	border:2px solid black;
	background-color: rgba(5,45,76,0.8);
	line-height:25px;
	box-shadow: 3px 3px 3px black;
	}
#compteur {
	margin-top:20px;
	padding:10px;
	border:2px solid black;
	background-color: rgba(5,45,76,0.8);
	box-shadow: 3px 3px 3px black;
	}
/*Partie centrale*/
#jambe {
	overflow:auto;
	}
#contenu {
	padding:50px;
	margin-right:10px;
	margin-top:10px;
	min-height:134px;
	text-align:left;
	line-height:20px;
	border:2px solid black;
	background-color: rgba(5,45,76,0.8);
	box-shadow: 3px 3px 3px black;
	}
#piedpage {
	margin-left:0px;
	text-align:center;
	overflow:auto;
	}
Dans le code ci-dessus, le header s'adapte déjà à la largeur de la page, mais la hauteur est fixe.
J'ai déjà pensé à mettre une hauteur en pourcentages pour donner l'impression que le ratio est conservé, mais le header devient alors invisible. (je pense qu'il prends la hauteur de 0px)
Voilà, j'ai pas mal essayé, de plusieurs façons, et je n'y parviens toujours pas, maintenant si quelqu'un de plus expérimenté que moi pourrait m'aider sans trop de difficultés, je lui en serai fortement reconnaissant !
Merci d'avance à ceux qui s'y pencheront !