为没有固定宽度的水平居中图像制作叠加层

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;
}

我的要求如下：

使图像填充可用的垂直区域 space 并将其水平居中。（作品）
制作与图像大小相同的图像叠加层 - 不使用绝对 width 属性。（不起作用 - 问题）
将图标固定到图像上的特定位置。（使用 top 和 left 属性的百分比......不确定这是否会像我目前想象的那样简单。）

我怎样才能拥有这一切 - 水平居中的图像展开以填充垂直 space、精确的叠加和固定到图像特定位置的元素？

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

Answer 1

一种方法是将图像和叠加层包裹在 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>

像这样，Image 将设置其父级的宽度，同时也设置 Overlay 的宽度。

为没有固定宽度的水平居中图像制作叠加层

Make an overlay for a horizontally centered image without fixed width

html

javascript

css

overlay

image