html - 调整浏览器页面大小时放大/缩小背景图像

Question

我目前正在用 HTML/CSS 开发网页的页脚。该页脚将包含许多元素(地址、链接、按钮等)，因此它必须具有响应能力。因此，在桌面版本上，我们将所有页脚的元素放在一行上，然后在移动设备上，我们将所有页脚的元素放在一列上(如下图所示)；

我的目标是在宽屏(桌面)上获得以下结果:

这是我想在移动屏幕上实现的结果:

正如您所看到的，当我们调整浏览器页面大小或传递到智能手机屏幕时，我们必须具有缩放效果。我要在页脚中插入很多元素，因此必须缩放图像才能将它们全部集成。

这是我到目前为止所做的代码。

.footer {
  height: 639px;
  background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="footer"></div>

结果几乎是我想要的，但问题是页脚的高度没有改变，因此我没有足够的空间将所有元素放在移动设备的页脚中版本。

谢谢:)

Answer 1

尝试在手机媒体查询中添加 height: auto、padding-top、padding-bottom。您可能需要多次尝试填充值才能使其看起来不错。同时更改background-position，以便可以在手机上看到曲线。它看起来像这样。

@media (max-width: 991.98px){
.footer{
  height: auto;
  padding: 50px 0;
  background-position: center top; 
 }
}