移动响应式图像未重新缩放

Question

所以我有网站和页脚，我在其中使用图像(背景(作为页脚。 在移动设备上看起来很恶心。

但我不知道为什么。它没有重新缩放，而且移动设备上的图像质量非常差。 代码为：

footer {
padding: 50px 0 30px;
background: url(“../img/bg-footer.jpg”) center center no-repeat;
background-size: cover;
}

.bg-footer {
position: relative;
width: 100%;
height: auto;
top: -100%;
left: 0;
z-index: 0;
overflow: hidden;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
}

.bg-footer img {
margin-left: -300px;
}

网络：http://petofi.vac.hu/proba23/

Answer 1

由于您巧妙地将 bg 淡化为边缘周围的黑色，因此您可以轻松地使背景浮动小于元素。使用"包含"作为背景大小。

.CSS

footer {
padding: 50px 0 30px;
background: url(“../img/bg-footer.jpg”) 50% 50% / contain no-repeat;
}