缩小浏览器时如何保持图像的高度调整大小？ [复制]

Question

编辑的问题如何在缩小浏览器时保持图像的高度调整大小？

好的，我已经尝试搜索了一段时间，但似乎无法在任何地方找到它。这就是我想要做的......

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

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

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

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

/* 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;
}

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

http://www.myshinyjewels.com/images/fullbrowsersize.jpg

http://www.myshinyjewels.com/images/reducedbrowsersize.jpg

Answer 1

添加

background-size: contain;

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

所以，用你的例子：

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

免责声明：根据MDN Reference，这在 IE8 中不起作用，但应该适用于其他所有内容。

Answer 2

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

例如使用

@media (min-width 768px) {

     h1{
        font-size: 40px;
       } 
     }

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

如果它小于这个大小，那么它将使用你在这个 @media 查询之前定义的任何 h1。这对于首先为移动设备制作网站要容易得多，但是您可以通过使用 max-width 而不是 min-width 来全面应用它。因此，在您的示例中，如果屏幕低于设置的像素大小，您可以将按钮的宽度和高度设置为更小的百分比或像素。