如何在移动设备上修复图像

Question

我在网站上集成了一个固定的封面图像，效果很好：https://stadtpampa.de/4407-2/不幸的是，它在移动设备上不起作用。图像没有响应，也没有固定。参见移动版

我试图在CSS中用@media:更改大小

@media(max-width: 768px) {
.wp-block-cover {
min-height: 300px !important;
}}

这个尺寸还可以，但不是固定的。你能帮我用正确的CSS代码来修复移动设备上的图像吗？

提前感谢！

Answer 1

我不使用background-image，而是使用具有短手属性的background。我还删除了min-height: 300px !important;，因为它不是必需的。

这应该奏效。

.wp-block-cover {
background: transparent url(https://stadtpampa.de/wp-content/uploads/2020/12/Schoenower-Heide-Auf-der-Aussichtsplattform.jpg) no-repeat top center;
background-attachment: fixed;
background-size: 400px;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
}