时间戳

首页 > 解决方案 > 调整浏览器页面大小时放大/缩小背景图像

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

问题描述

我目前正在用 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>

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

谢谢 ：）

标签： htmlcsssass

解决方案

尝试在电话的媒体查询中添加height: auto, 。您可能需要多次试验填充值以使其看起来不错。也改变了曲线可以在手机上看到。它看起来像这样。padding-toppadding-bottombackground-position

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

推荐阅读