具有变化的 img 的固定大小容器的奇怪滚动行为

Question

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

问题是当你向下滚动半只猫时，当img发生变化时，滚动开始上下跳跃。

有人可以解释这种行为吗？ 我有一个 codepen 来说明这个问题。

html:

<div class="to-change-container">
  <img class="to-change"></img>
</div>
<div class="height-stratcher"></div>

css:

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: auto;
}

.to-change-container {
  height: 300px;
  width:300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.height-stratcher {
  height: 1000px;
}

.to-change {
  max-height: 100%;
  max-width: 100%;
}

js:

picLinks = [
  'https://www.meme-arsenal.com/memes/43cdd26dcc65986fac314bcab0d4d2be.jpg',
  'https://pngriver.com/wp-content/uploads/2018/04/Download-Red-Cat-PNG.png',
  'https://www.meme-arsenal.com/memes/d5054013f48d02a72a054bae89a15992.jpg'
]

setInterval(()=> {
  let element = document.getElementsByClassName('to-change')[0];

  element.src = picLinks[Math.floor(Math.random()*10) % 3];
}, 1000);

UPD

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

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

有没有办法在不裁剪和分层的情况下将图像放入容器中？

Answer 1

您需要使图像具有响应性，您可以使用以下样式实现它：

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

Answer 2

大猫脸图比其他的大，好像影响身高。

试试这个：

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

Answer 3

limco 是正确的

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

会解决你的问题。

问题在于 flex 框，并且来自 API 的图像大小都不同，并且正在扩展包含的 div。 Display flex 的行为不像显示块大小可以在子项更改时发生变化。

如果您担心隐藏溢出的裁剪，您可以随时选择将 to-change-container 设置为 display:block 并将内部图像设置为 100% 宽度和自动高度，您可以使用几种不同的策略.

Answer 4

由于图像的高度不同，滚动条会跳动。 如果要保留滚动条，则需要为图像设置固定高度。试试这个：

.to-change-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.to-change {
  height: 300px;
  width: auto;
}

否则，将overflow: hidden; 设置为其他答案指出的那样。