我正在尝试为我的新网站设置一个框架，但我在某些屏幕分辨率上遇到了问题。看起来我的图像banner-logo.png在某些时候太大了（关于用户的屏幕分辨率）。
我正试图找出一种方法，让我的整个顶部横幅调整大小，以便根据用户的屏幕分辨率进行调整。
我还想将菜单居中对齐div的中心（宽度为100％）。
以下是我到目前为止所做的事情：
body {
background-color: #000000;
color: white;
}
img, object, embed, canvas, video, audio, picture {
max-width: 100%;
height: auto;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
li {
margin-left:0px;
float:left;
/*pour IE*/
}
ul li a {
display: inline;
color:white;
text-decoration:none;
text-align:center;
padding:15px;
}
ul li a:hover {
color: yellow;
}
div#header {
position: absolute;
background-image: url("../images/banner-bg.jpg");
background-repeat: repeat-x;
top: 0;
left: 0;
width: 100%;
}
div#top-banner {
width: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
height: 453px;
}
div#gars-gauche {
float: left;
width: 333px;
height: 100%;
background-image: url("../images/gars-gauche.png");
background-repeat: no-repeat;
display: inline;
}
div#banner-centre {
height: 453px;
max-width: 100%;
text-align: center;
vertical-align:middle;
display: inline;
}
div#gars-droite {
float: right;
width: 333px;
height: 100%;
background-image: url("../images/gars-droite.png");
background-repeat: no-repeat;
display: inline;
}
div#top-menu {
position:relative;
top: 20px;
left: 80px;
}
div#content {
width: 100%;
text-align: center;
color: white;
padding-top: 35px;
}
h1 {
color: white;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">
<div id="top-banner">
<div id="gars-gauche"></div>
<div id="banner-centre">
<img src="images/banner-logo.png" alt="banner" />
</div>
<div id="gars-droite"></div>
</div>
<div id="top-menu">
<ul>
<li><a href="#">ACCUEIL</a></li>
<li><a href="#">MODÈLES</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">TARIFS</a></li>
<li><a href="#">POLITIQUE</a></li>
<li><a href="#">PARTENAIRES</a></li>
<li><a href="#">RECRUTEMENT</a></li>
<li><a href="#">WEBCAM</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FACEBOOK</a></li>
</ul>
</div>
<div id="content">
<h1>BIENVENUE CHEZ LES GENTLEMEN'S</h1>
<hr />
<h3>SERVICE D'ACCOMPAGNEMENT POUR HOMMES ET FEMMES DE TOUS ÂGES</h3>
<p>Les Gentlemen's sont fiers d'offrir aux hommes et femmes un service d'accompagnement de qualité supérieur dans le secteur de Montréal et ses environs.</p>
<p>Vous avez envie d'un souper romantique, d'une sortie au cinéma ou d'un moment de tendresse?</p>
<p>Nos Gentlemen's s'engagent à vous offrir un moment inoubliable!</p>
<a href="http://zonevideo.telequebec.tv/media/18521/emission-428/les-francs-tireurs" target="_new"><img src="images/Banner-les-francs-tireur.jpg" alt="Les Francs Tireurs"/></a>
<br />
<br />
<a href="https://soundcloud.com/les-gentlemens/entrevue-boom-1041fm" target="_new"><img src="images/Banner-Osez-les-gentlemens.jpg" /></a>
</div>
<div id="footer"></div>
</div>
</body>
</html>
答案 0 :(得分：1)
如果你想在横幅上有一个完全可变的高度，我建议你使用分配给你的字体大小的视口宽度单位，然后使用EM缩放其他所有内容。至于您关于居中的问题，您可以使用inline
text-align: center;个项目
em单位与您的字体大小相同，因此您还可以调整要用于em的所有图片的尺寸，它们将与font-size: 1.3vw;一起缩放。
#top-menu {
font-size: 1.3vw;
}
ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
ul li {
display: inline;
padding: 0 1em;
}
#dog {
width: 12em;
}<div id="top-menu">
<img id="dog" src="http://images.clipartpanda.com/dog-clipart-pT5qj6ETB.png">
<ul>
<li><a href="#">ACCUEIL</a>
</li>
<li><a href="#">MODÈLES</a>
</li>
<li><a href="#">SERVICES</a>
</li>
<li><a href="#">TARIFS</a>
</li>
<li><a href="#">POLITIQUE</a>
</li>
<li><a href="#">PARTENAIRES</a>
</li>
<li><a href="#">RECRUTEMENT</a>
</li>
<li><a href="#">WEBCAM</a>
</li>
<li><a href="#">CONTACT</a>
</li>
<li><a href="#">FACEBOOK</a>
</li>
</ul>
</div>
如果您只想调整图像大小而不是文本大小，则可以使用width: 10vw;将宽度设置为屏幕宽度的百分比，以获得视口宽度的10％。
答案 1 :(得分：0)
要使菜单居中，请尝试以下方法：
CSS：
ul {
padding:0;
list-style-type:none;
}
li {
margin-left:0px;
display:inline-block;
}
div#top-menu {
position:relative;
top: 20px;
text-align:center;
}
为了制作完整尺寸的横幅，很难说没有看到它的实际效果。我建议从使用background-size:cover;