html - 设置宽度和高度的响应式 div

Question

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

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

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

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

希望对您有所帮助! :)