为没有固定宽度的水平居中图像制作覆盖

Question

我有这样的HTML结构：

<div class="container">
<img class="image" />
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>

这个CSS代码：

.container {
position: relative;
height: 88vh;
margin: 0;
}
.image {
height: 100%;
position: absolute;
margin-right: auto;
margin-left: auto;
left: 0;
top: 0;  
bottom: 0;
right: 0; 
}
.overlay {
position: absolute;
}

我的要求如下：

1. 使图像填充可用的垂直空间并水平居中。(工程(
2. 在不使用绝对width属性的情况下，使图像覆盖与图像大小相同。(不起作用-问题(
3. 将图标固定到图像上的特定位置。(对top和left属性使用百分比……不确定这是否会像我目前认为的那样容易。(

我如何才能拥有这一切-一个水平居中的图像扩展以填充垂直空间，一个精确的覆盖和固定到图像特定点的元素？

虽然我更喜欢CSS破解，但也会考虑Javascript解决方案，以防图像的宽度需要以编程方式传输到覆盖层。

Answer 1

一种方法是将Image和Overlay包装在div中并居中。

.container {
position: relative;
height: 88vh;
margin: 0;
text-align: center;
}
.imagecontainer
{
position: relative;
display: inline-block;
height: 100%;
}
.image {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}

<div class="container">
<div class='imagecontainer'>
<img class="image" src='imageurlhere'/>
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
</div>

像这样，图像将设置其父对象的宽度，同时也设置覆盖的宽度。