Css 当浏览器缩小时，如何保持图像高度的大小？

编辑的问题当浏览器缩小时，如何保持图像高度的大小

好的，我已经试着搜索了一段时间，但似乎在任何地方都找不到它。这就是我要做的

我的导航使用上传的图像，而不是CSS生成的导航菜单

当我调整浏览器窗口的大小时…我的背景会使用以下方法正确调整大小：

body {
background: url('/images/background.jpg') no-repeat center center fixed; 
background-color:#000000;
background-size: 70%;
}

至于我的导航图像…我已经让它们调整大小，但没有停留在正确的位置…这是我的代码…80px导航a高是问题所在

/* navigation */
nav {
position: relative; 
top: 200px;
left: 10%;
max-width: 15%;
}

nav a {
display: block;
max-width: 191px;
height: 80px;
margin: 0;
padding: 0;
}

#homebutton {
background: url('/images/homebutton.png') no-repeat 0, 0;
background-size: contain;
}

#aboutbutton {
background: url('/images/aboutbutton.png') no-repeat 0, 0;
background-size: contain;
}

#storebutton {
background: url('/images/storebutton.png') no-repeat 0, 0;
background-size: contain;
}
#facebookbutton {
background: url('/images/facebookbutton.png') no-repeat 0, 0;
background-size: contain;
}
#contactbutton {
background: url('/images/contactbutton.png') no-repeat 0, 0;
background-size: contain;
}

这里是我的意思的图片…第一个是全尺寸的浏览器…第二个是缩小尺寸的浏览器

加

使用背景图像对这些元素中的每一个进行复制。背景图像将保持在其元素大小的范围内

因此，以你的例子：

#aboutbutton {
background: url('/images/aboutbutton.png') no-repeat 0, 0;
background-size: contain;
width: 191px;
height: 80px;
display: block;
}

---

免责声明：这在IE8中不起作用，但在其他所有情况下都应该起作用。

您可以使用CSS3@media query根据浏览器窗口的大小定义更改

例如使用

@media (min-width 768px) {

     h1{
        font-size: 40px;
       } 
     }

这意味着，如果浏览器的宽度高于最小值768px，则将h1字体大小设置为40px

---

如果它小于此大小，则它将使用您在此@media查询之前定义的h1。这是一个很多的eaiser为移动网站虽然第一，但你可以应用它的方式通过使用最大宽度而不是最小宽度。因此，在您的示例中，如果屏幕低于设置的像素大小，您可以将按钮的宽度和高度设置为较小的百分比或像素

你可能没有在谷歌搜索到正确的位置。至少有十几个类似的问题，都在这里。看看CSS3媒体查询。此外，如果您有导航a：{width:191px；height:80px；display:block；，你不需要像已经添加的那样将其添加到每个ID中，想想干的方法。谢谢你，Nick R…这很好…但仍然没有答案…虽然…现在我对80px的高度有问题…有办法使其也可调吗？我做了你的建议n和…我也做了一些额外的更改，并通过更改以下内容来调整图像大小：nav{position:relative；top:200px；left:200px；max width:15%；}但这是一个巨大的更改…我希望它是流畅的，目前我正在为nav菜单处理图像。

@media (min-width 768px) {

     h1{
        font-size: 40px;
       } 
     }