html - 具有不断变化的 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 .

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

有没有办法在不裁剪和拉伸(stretch)图像的情况下将图像放入容器中？

Answer 1

limco 是正确的

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

将解决您的问题。

问题出在 flex box 上，事实上来自 API 的图像大小各不相同，并且正在扩展包含的 div。 Display flex 的行为不像显示 block 大小会随着子项更改而变化。

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