Div 覆盖框架安装

Question

我想要实现的目标：

• 有图片"轮播">
• 当内部图像出现和消失时，框架将固定在原位，但会根据图像的大小调整大小。框架是 png，只有外部是彩色的。

我是否需要一个外部div 根据其内部 img 标签更改其大小，而另一个div 将始终保持在图像的顶部(将另一个图像作为 png 帧提供(，无论 img 标签的大小如何变化？

欢迎任何标签和样式的结构，也许是内部div 或跨度或其他什么。JavaScript是一种选择，但我对纯CSS方法非常感兴趣。

<div id="outer">
    <img id="frameOnTop" src="...">
    <img id="image" src="...">
</div>

编辑

工作示例：

https://codepen.io/xdx950/pen/eYYXjBa

Answer 1

编辑：我找到了一种不需要javascript的方法：

const innerBottom =  document.getElementById("inner-bottom");
const resizeButton = document.getElementById("resize-button");
function resize() {
	const newSize = Math.floor(Math.random() * 300);
  console.log(`Setting new size to ${newSize}`);
  innerBottom.style.height = newSize + "px";
  innerBottom.style.width = newSize + "px";
};
resizeButton.addEventListener("click", resize);

* {
  box-sizing: border-box;
  transition: 0.5s
}
#outer {
  position: relative;
  padding: 10px;
  float: left;
  background-color: green;
}
#inner-bottom, #inner-top {
  position: absolute;
  top: 0;
  left: 0;
}
#inner-bottom {
  position: relative;
  width: 150px;
  height: 150px;
  z-index: 1;
}
#inner-top {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  z-index: 2;
  border: red 2px dotted;
  margin: 5px;
}

<div id="outer">
  <img id="inner-bottom" src="https://cdn.pixabay.com/photo/2018/09/09/19/02/dog-bitch-3665315_960_720.jpg" />
  <img id="inner-top" />
</div>
<button id="resize-button">
resize!
</button>