3

我正在使用foundation 4作为我的个人网站的框架（不是100%的投资组合网站，更像是作为自由职业者宣传自己），我有一个带有背景图像集的联系人框，并应用了这些CSS样式：

#contact-box {width: 1052px;
      height: 400px;
      background-image: url('../images/contact-bg.png');
      margin-top: 150px;}

我想让它在你缩小浏览器时缩小，但它只是给了我一个水平滚动条并且根本不缩放，我知道这是因为设置了 1052px 宽度......所以我将如何编码所以它的响应？如果我使用最大宽度和最大高度，它会破坏 div 并删除它的 bg 图像。联系人框中有一个联系表单（响应式）以及一个电话号码、电子邮件和 3 个社交图​​标。

4

3 回答 3

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 元素的第二个参数将确保图像永远不会垂直缩放。但是，只要窗口的宽度超过您正在使用的图像的纵横比保留宽度，此方法就会导致您的背景图像被水平拉伸。

希望这可以帮助！:)

于 2013-05-06T04:37:10.087 回答
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;
}
于 2013-05-06T05:06:09.470 回答
0

将 #contact-box 的宽度设置为width: 100%。

于 2013-05-06T03:48:21.720 回答