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

【问题标题】：How to fix an image on mobile devices?如何在移动设备上修复图像？
【发布时间】：2021-03-31 06:58:25
【问题描述】：

我在我的网站上集成了一个固定的封面图片，它工作正常：https://stadtpampa.de/4407-2/ 不幸的是，它不适用于移动设备。图像没有响应，也没有固定。 See mobile version

我尝试在 CSS 中使用 @media 更改大小：

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

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

提前致谢！

【问题讨论】：

你试过 height: auto;没有最小高度；？这是你想要的吗？
感谢您的回答。不幸的是，这不是我想要的。
好的，所以更好地解释你想要什么，也许包括你的问题的工作示例
与stackoverflow.com/questions/41190405/…重复
在桌面版本上，当我滚动时，第一个图像是固定的。我也想在移动设备上使用它。

标签： css wordpress media-queries

【解决方案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%;
}

【讨论】：

谢谢！我只需要从background-attachment 到“位置”做一个微小的改变，这就是我喜欢的方式。谢谢！！