我使用基金会4作为我个人网站的框架（不是100%个投资组合站点，更多的是作为自由职业者自己做广告），我有一个带有背景图像集和这些CSS样式的联系框：
#contact-box {width: 1052px;
height: 400px;
background-image: url('../images/contact-bg.png');
margin-top: 150px;}
我想让它在缩小浏览器时缩小，但它只给了我一个水平滚动条，根本不缩放，我知道这是因为1052px的宽度设置…我该怎么编码才能让它有响应性呢？如果我使用最大宽度和最大高度，它会打断div并删除其bg图像。“联系人”框中有一个联系人表单（可响应），以及电话号码、电子邮件和3个社交图标。
最佳答案
我只想留下一个评论，但我似乎没有选择。
我不知道这是否是您想要的答案，但我通常使用以下代码将背景图像缩放到窗口大小：
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元素的第二个参数将确保图像永远不会垂直缩放。但是，当窗口宽度超过正在使用的图像的纵横比保留宽度时，此方法将导致背景图像水平拉伸。
希望这有帮助！：）
关于html - 设置宽度和高度的响应div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16391647/