Html 设置宽度和高度的响应式div 我使用基金会4作为我个人网站的框架（不是100%个组合站点，更多的是作为一个自由职业者做广告），我有一个带有背景图像集和这些CSS样式的联系框： #contact-box {width: 1052px; height: 400px; background-image: url('../images/contact-bg.png'); margin-top: 150px;}

我想让它在缩小浏览器时缩小，但它只给了我一个水平滚动条，根本不缩放，我知道这是因为1052px的宽度设置。。。那么，我该如何将其编码出来，使其具有响应性呢？如果我使用“最大宽度”和“最大高度”，它会打断div并删除其bg图像。联系人框中有一个联系人表单（它是响应性的），还有一个电话号码、电子邮件和3个社交图标

将#联系人框的宽度设置为宽度：100%

我只是想留下评论，但我似乎没有选择权

我不知道这是否是您想要的答案，但我通常使用如下代码将背景图像缩放到窗口大小：

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;

背景大小元素的第二个参数将确保图像永远不会垂直缩放。但是，当窗口宽度超过正在使用的图像的纵横比保留宽度时，此方法将导致背景图像水平拉伸

---

希望这有帮助！：）

您可以尝试此方法，并根据此处获取的来源对其进行修改

这是另一种方法

#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;
}

---

它做了什么？如果没有更多信息，很难提供太多帮助。宽度：100%不占整个宽度吗？您是否将#contact box更改为内联元素？我想是一个div？

#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;
}