Question

我在我的网站上使用WordPress Twenty Seventeen，我的移动设备上的标题图片存在问题。当我开始滚动时，标题图像有点放大，我试图谷歌这个问题，但没有提出任何问题，我已经尝试通过CSS代码并且没有看到任何转换或者当我检查它们时，元素会发生变化，这是一个示例网站：

当您开始滚动时，标题图像是缩放的缩放，是否有防止这种情况，因此它在滚动之前保持相同的大小？

Answer 1

这种情况正在发生，因为mobile-chrome将地址栏计算到视口高度，在滚动网页时，地址栏也会滚动，可见区域动态地改变它的高度。

E.g。在320px X 360px屏幕上，在带有地址栏的mobile-chrome上，视口的高度为564px，在地址栏消失后滚动后，视口的高度将更改为620px。

带地址栏的视口高度

没有地址栏的视口高度

现在image .wp-custom-header取min-height:100%;height:100% media queries会动态改变高度，因此图片会在滚动时更改尺寸。

更好的方法是在.has-header-image .custom-header-media img{ height: 620px; min-height: 0; }中以像素为单位修复图像高度。

String

类似问题：

Answer 2

将position: relative;添加到封面img：

.wp-custom-header img {
    position: relative;
}

当前位置为fixed，与object-fit: cover;一起导致缩放效果。

Answer 3

您可以尝试关注css：

html, body {
    height:100%;
}
html {
    overflow: hidden;
}

body {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

这会阻止浏览器隐藏地址栏。因此，当我们滚动时，我们将摆脱跳跃。

我在你的网址中尝试了这个并且它正在运行。我建议在适当的媒体查询中使用它。