适合任何屏幕的菜单（自动调整宽度）
我正在制作一个完美适合任何屏幕的菜单，但其高度不会改变（仅其宽度）。
问题是：我的菜单分为 3 个图像（左、中、右）。 中间图像调整大小以适合屏幕（我设置了 70%），但是当屏幕宽度较小时，菜单的两侧会断线，如下所示：
我需要解决方案，或者其他方法来制作此菜单！
它必须占据整个宽度并在其两侧具有渐变。
<!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">
<head>
<script>
var onre = function(){
var w = document.getElementById('make2fit').offsetWidth;
var h = document.getElementById('make2fit').offsetHeight;
var ww = window.innerWidth;
var wh = window.innerHeight;
var p = (Math.floor((ww/wh)*100)/100<1)?(ww/w):(wh/h);
var nw = Math.round(w * p);
var nh = Math.round(h * p);
document.getElementById("make2fit").width = nw;
document.getElementById("make2fit").height = nh;
}
window.onresize = onre;
window.onload = onre;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Silvania Miranda</title>
<style type="text/css">
body {
background-color: #030708;
}
div.menu {
/* current css */
min-width:960px; /* which is the current minimum width for designing website for desktops */
height:auto;
width:auto;
margin-right:auto;
margin-left:auto;
position:relative;
top:510px;
overflow:hidden;
}
ul li {
/* current css */
display:block; /* default display for list elements, could be omitted */
float:left;
width:30%;
max-width:125px;
min-width:50px;
color:white;
}
ul {
/* current css */
overflow:hidden
}
div.mulher{
width:auto;
height:auto;
z-index:-1;
bottom:0px;
right:0px;
position:absolute;
}
div.fundo{
position:absolute;
width:100%;
height:auto;
bottom:15%;
}
div.fundomenu{
background:url(menufundo.png);
width:80%;
height:60px;
position:relative;
margin-right:auto;
margin-left:auto;
z-index:0;
float:left}
div.cantomenu
{position:relative;
height:60px;
width:156px;
overflow:hidden;
z-index:100;
float:left}
div.esq{background:url(menupontae.png)}
div.dir{background:url(menupontad.png)}
</style>
</head>
<body>
<div class="mulher"><img src="mulher.png" id="make2fit" style="margin:0px;"/></div>
<div class="fundo">
<div class="esq cantomenu"></div>
<div class="fundomenu"></div>
<div class="dir cantomenu"></div>
</div>
</body>
</html>I'm making a menu that fits perfectly in any screen, but its height doesn't change (only its width).
The problem is: my menu is divided in 3 images (left, middle and right).
Middle image resizes to fit the screen (i putted 70%) but when the screen has smaller width, the sides of menu break lines, like that:
I need solutions for this, or other ways to make this menu!
It have to occupy the whole width and have the gradient on its sides.
<!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">
<head>
<script>
var onre = function(){
var w = document.getElementById('make2fit').offsetWidth;
var h = document.getElementById('make2fit').offsetHeight;
var ww = window.innerWidth;
var wh = window.innerHeight;
var p = (Math.floor((ww/wh)*100)/100<1)?(ww/w):(wh/h);
var nw = Math.round(w * p);
var nh = Math.round(h * p);
document.getElementById("make2fit").width = nw;
document.getElementById("make2fit").height = nh;
}
window.onresize = onre;
window.onload = onre;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Silvania Miranda</title>
<style type="text/css">
body {
background-color: #030708;
}
div.menu {
/* current css */
min-width:960px; /* which is the current minimum width for designing website for desktops */
height:auto;
width:auto;
margin-right:auto;
margin-left:auto;
position:relative;
top:510px;
overflow:hidden;
}
ul li {
/* current css */
display:block; /* default display for list elements, could be omitted */
float:left;
width:30%;
max-width:125px;
min-width:50px;
color:white;
}
ul {
/* current css */
overflow:hidden
}
div.mulher{
width:auto;
height:auto;
z-index:-1;
bottom:0px;
right:0px;
position:absolute;
}
div.fundo{
position:absolute;
width:100%;
height:auto;
bottom:15%;
}
div.fundomenu{
background:url(menufundo.png);
width:80%;
height:60px;
position:relative;
margin-right:auto;
margin-left:auto;
z-index:0;
float:left}
div.cantomenu
{position:relative;
height:60px;
width:156px;
overflow:hidden;
z-index:100;
float:left}
div.esq{background:url(menupontae.png)}
div.dir{background:url(menupontad.png)}
</style>
</head>
<body>
<div class="mulher"><img src="mulher.png" id="make2fit" style="margin:0px;"/></div>
<div class="fundo">
<div class="esq cantomenu"></div>
<div class="fundomenu"></div>
<div class="dir cantomenu"></div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这里真正安全的选择是使用 1 行 3 列的表格。这将为您提供所需的列（左、右、中）并且宽度将保持不变。关于列的背景图像，您可能需要考虑如何设计和剪切它们以使其看起来不错。
这里的另一个选择是 html css 和 html css 的组合。 javascript - 唯一的问题是，如果浏览器不支持 JS，您的网站将看起来不正确。
这有帮助吗？
Really safe option here would be to use table with 1 row and 3 columns. That would give you columns you want (left, right, middle) and the width will be maintained. With regards to background images for columns you might want to think how to design and cut them to make it look good.
another option here would be a combination of html css & javascript - the only problem is that if browser does not support JS, your website wouldn't look right.
Does that help?