html - 已安装 Div 覆盖框架

Question

我要达到的目标:

• 有一张图片“轮播”
• 框架静止不动，而内部图像出现和消失，但会根据图像的大小调整大小。框架是 png，只有外部颜色。

我是否需要一个根据其内部 img-tag 更改其大小的外部 div，而另一个 div 将始终位于图像的顶部(将另一个图像用作 png-frame)，无论 img 的大小如何-标记更改？

任何结构的标签和样式都是受欢迎的，也许是内部 div 或 span 或其他。 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>