时间戳

首页 > 解决方案 > 具有变化的 img 的固定大小容器的奇怪滚动行为

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

问题描述

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

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

有人可以解释这种行为吗？我有一个说明问题的代码笔。

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似乎解决了原始代码笔中显示的问题。在图像再次中断之前添加更改文本。

图像似乎也不会影响图像容器的尺寸。

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

标签： htmlcss

解决方案

limco是正确的

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

会解决你的问题。

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

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

推荐阅读