Html 固定大小的img容器的奇怪滚动行为

我有一个100%高度和宽度的页面，一个固定大小的img容器和一个每秒都在变化的img。Img在其容器内垂直和水平居中

问题是当你向下滚动半只猫时，当img改变时，滚动开始上下跳动

有人能解释这种行为吗？ 我对这个问题有一个解释

html:

UPD

设置
overflow:hidden
似乎可以解决原始代码笔中显示的问题。在图像之前添加更改文本

此外，图像似乎不会影响图像容器的尺寸

有没有一种方法可以将图像放入容器中而无需裁剪和层叠？
您需要使图像具有响应性，并且可以使用以下样式实现：

.to-change-container img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

大猫脸的图像比其他的都大，似乎影响了高度

试试这个：

.to-change-container {
  overflow: hidden;
}

limco是对的

.to-change-container {
  overflow: hidden;
}

会解决你的问题

问题在于flex box，API中的图像大小都不同，并且正在扩展包含的div。Display flex的行为与显示块大小不一样，当子项发生变化时，显示块大小可能会发生变化

如果您担心在溢出隐藏的情况下进行裁剪，您可以始终选择将to change container设置为display:block，并将内部图像设置为100%宽度和自动高度，您可以使用几种不同的策略
 由于图像高度不同，滚动条会跳跃。
如果要保留滚动条，需要为图像设置固定高度。试试这个：

。以更改容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.改变{
高度：300px；
宽度：自动；
}

否则，设置
溢出：隐藏正如其他答案所指出的。
我无法用你的代码笔重现这个问题。既不在铬，也不在边缘。你能解释一下到底发生了什么，或者发布一个gif吗？注意右边的滚动条。您需要先向下滚动一点，才能看到滚动条在跳跃。请为您的答案提供上下文，以便它与所问问题相关。谢谢您的回答。它确实修复了代码笔中滚动条的跳跃。但是我检查了图像容器的大小，没有溢出：隐藏，它没有改变。所以我认为图像大小不会影响图像容器。我制作了另一个图像，在图像顶部有一个图像标签，图像容器中隐藏了溢出，滚动条仍然在到处跳跃。你能检查一下吗？如果你在容器上加上“border:solid 1px red”和在图像上加上“border:solid 1px blue”，你就会明白我的意思，当图像改变时，你可以看到容器的高度在底部反弹。这是因为滚动条在跳跃。一直滚动到顶部，使整个容器都在视图中，尺寸不变。图像的高度不同，但在devtools中我看不到图像容器尺寸的变化。我做了另一个容器的溢出隐藏。同样的问题。将“对齐项目”更改为“开始”（或任何其他非
居中的项目）似乎可以解决此问题，但图片未居中。您需要在body元素上设置它：
body{overflow:hidden；}
。但是，这将隐藏整个页面的滚动条。否则，请尝试为容器指定一个固定高度，该高度高于具有最大高度的图像的高度（这有意义吗，lol？）。这会破坏在固定大小容器中使用不同大小图片的想法：）