Javascript 带叠加div的全出血响应图像_Javascript_Html_Css

Javascript 带叠加div的全出血响应图像

javascript html css

Javascript 带叠加div的全出血响应图像,javascript,html,css,Javascript,Html,Css,我正试图解决一些一开始看起来很简单的问题，但现在已经演变成了一场小小的噩梦。我能够对下面描述的部分功能进行编码，但不是全部我在网站上有图像作为数据URL。这些图像的尺寸和纵横比是可变的。我想创建一种具有以下特征的灯箱（请参见方案）： IMG（或DIV）具有保留的纵横比（如对象匹配：包含；或背景图像：包含；）响应的几乎全屏，边距约1米水平和垂直居中正好覆盖在IMG（或DIV）上的DIV，作为混合结果图像的容器另一个正好覆盖在DIV上作为角文本的容器作为背景画布，全视图端口

我正试图解决一些一开始看起来很简单的问题，但现在已经演变成了一场小小的噩梦。我能够对下面描述的部分功能进行编码，但不是全部

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

```
IMG
```
（或
```
DIV
```
）具有保留的纵横比（如
```
对象匹配：包含；
```
或
```
背景图像：包含；
```
）
- 响应的
- 几乎全屏，边距约1米
- 水平和垂直居中
正好覆盖在
```
IMG
```
（或
```
DIV
```
）上的
```
DIV
```
，作为混合结果图像的容器
另一个正好覆盖在
```
DIV
```
上作为角文本的容器
作为背景画布，全视图端口
```
DIV
```
（
```
位置：固定；插图：0；
```
行为）具有较高的亮度和背景过滤器

我尝试了这里建议的所有相关方法，但未能获得全部功能。

有没有办法用HTML/CSS做到这一点？有没有一种（简单的）方法可以在Javascript中实现这一点？

这可能会帮助您：谢谢！我将尝试用clamp（）方法解决它。@Temaniaff谢谢你的建议！我能够用

clamp

创建一个有效的解决方案：但是，这在Firefox中不起作用（适用于Android、Chrome和Opera）。知道为什么吗？Firefox似乎有问题（即使是我的答案）。我将尝试找出原因检查一下：我稍微修改了公式，这样它就可以在firefox上工作了