我使用基础4作为我个人网站的框架(不是100%的投资组合网站,更像是作为自由职业者做广告)我有一个带有背景图像集的联系人框,并应用了这些CSS样式:
#contact-box {width: 1052px;
height: 400px;
background-image: url('../images/contact-bg.png');
margin-top: 150px;}
我想让它缩小浏览器缩小比例,但它只是给我一个水平滚动条而根本不缩放我知道这是因为1052px的宽度设置...那么怎么会我把它编码好,所以它的响应?如果我使用最大宽度和最大高度,它会打破div并删除其bg图像。联系人框中有一个联系表格(响应)以及电话号码,电子邮件和3个社交图标。
答案 0 :(得分:1)
我想发表评论,但我似乎没有选择..
我不知道这是否是您想要的答案,但我通常会使用以下代码将背景图像缩放到窗口大小:
width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100%;
margin-top: 150px;
您可以将该css代码用于div标签和页面正文,但在我的实验中,页面正文不需要宽度和高度值。这样做会保持背景图像的纵横比,并允许它随窗口缩放。
由于上面的例子保持了纵横比,因此图像将垂直缩放到超过容器尺寸的位置,并且在底部看起来会被切掉。或者,您可以使用:
width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100% 400px;
margin-top: 150px;
background-size元素的第二个参数将确保图像永远不会垂直缩放。但是,只要窗口的宽度超过正在使用的图像的宽高比保留宽度,此方法就会导致背景图像水平拉伸。
希望这有帮助! :)
答案 1 :(得分:1)
您可以尝试此操作并根据此处http://css-tricks.com/perfect-full-page-background-image/
修改相应来源img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
这是另一种方法
#contact-box{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
答案 2 :(得分:0)
将#contact-box的宽度设置为 width:100%。