javascript - 带有覆盖 div 的全出血响应图像

Question

我正在尝试解决一开始看起来很简单的事情，但已经发展成为一场噩梦。我能够编写下面描述的部分功能，但不能一起编写。

我在网站上有图像作为 DataURL。这些图像的尺寸和纵横比是可变的。我想创建某种具有以下特征的灯箱（见方案）：

• IMG(or DIV) 保留纵横比 (like object-fit: contain;or background-image: contain;)
  • 反应灵敏
  • 几乎全屏，边距约为 1em
  • 水平和垂直居中
• 一个DIV完全覆盖那个IMG（或DIV）作为混合结果图像的容器
• 另一个完全覆盖DIV作为角落文本的容器
• 作为背景画布，具有高亮度和背景过滤器的全视图端口DIV（行为）position: fixed; inset: 0;

我尝试了此处建议的所有相关方法，但无法获得全部功能。有没有办法用 HTML/CSS 做到这一点？有没有一种（简单的）方法可以在 Javascript 中实现这一点？

标签： javascripthtmlcss