Javascript 延迟后淡入淡出图像

我正在尝试每隔几秒钟在div中切换图像
当前代码正常工作，但有两件事我想更改，我需要您的帮助：

div的大小将调整为显示在其中的当前图像，我希望它始终使用较大图像的大小

我想在图像之间淡入淡出，而不仅仅是切换

谢谢你的阅读，希望你能帮助我

到目前为止，我得到的是：

var-imgIndex=0；
setInterval（函数（）{
图像[imgIndex].style.display=“无”；
imgIndex++；
if（imgIndex>=images.length）{
imgIndex=0；
}
图像[imgIndex].style.display=“block”；
}, 5000);
.imageDisplay{
显示：内联块；
宽度：100%；
背景色：白色；
颜色：黑色；
边界半径：5%；
保证金：2倍；
填充：1px；
不透明度：0.5；
过渡时间：0.5s；
}
.图像显示：悬停{
不透明度：1；
}
.形象{
宽度：99%；
高度：自动；
保证金：1px；
填充：1px；
边界半径：5%；
光标：指针；
显示：无；
}

描述

首先，您可以将div设置为等于大图像的大小，然后使用：

object-fit: cover;
object-position:center;

至于切换，您可以使用：

transition: opacity .3s linear;

请阅读此处，了解如何准确实现转换。我的建议是把它们都堆起来，每隔几秒钟就一个一个地褪色


您不能自动设置较大图像的大小“我希望它始终使用较大图像的大小”-如果您希望自动设置，无论使用的是什么实际图像，都需要预加载它们，以便以后可以读取它们的尺寸。这是你可以去研究的。“我想在图像之间淡入淡出，而不是仅仅切换”-这也是您首先要正确研究的内容。感谢您的回答，我正在尝试使用div.style.height=div.getBoundingClientRect（）.height设置div的高度；虽然显示了最大的图像，但是现在所有的div对于它们的图像来说要么太大要么太小；应该告诉图像在所有维度中填充divs空间，而不使图像发生差异。我取得了一些进展，现在使用可见性而不是显示属性，并且在css中也做了一些更改，但没有更改代码rn。div现在不再包装它们的内容，只是顶部的描述文本，其余的溢出我现在使用div.style.height=div.scrollHeight调整了大小；