Question

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

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

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

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

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

至于我的导航图片......我已经让他们调整大小，但没有留在适当的位置......这是我的代码.... 80px导航高度是问题...：< / p>

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

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

Answer 2

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

例如使用

@media (min-width 768px) {

     h1{
        font-size: 40px;
       } 
     }

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

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

Answer 3

尝试将导航位置从绝对更改为position:relative;。

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

3 个答案: