我正在尝试为我的新网站设置一个框架，但我在某些屏幕分辨率上遇到了问题。似乎我的图像 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>最佳答案
如果您希望横幅广告的高度完全可变，我建议您使用分配给字体大小的视口(viewport)宽度单位，然后使用 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; 将它们的宽度设置为屏幕宽度的百分比。占视口(viewport)宽度的 10%。
关于html - Header 中的多个图像适应屏幕分辨率 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29761727/