auto-resize 一个 'div' 容器来适应图像？

Question

在 div 中，我想要一个背景图片和一个标题。标题必须在 div 中 hrz 和 vert 居中，这很容易用 display: flex。但是为此，我需要适合定期更改的图像的容器（div）。所以与通常的图像相反的问题适合容器。

Answer 1

这是您要找的吗？

将图像添加到容器
设置遮罩 absolute 位置覆盖整个容器
在该掩码内设置带有 flex 的标题
即使图片尺寸不同，标题仍会居中

let currentIndexTitle = 1;
const img = document.querySelector('.myImage');
const title = document.querySelector('.title');
const titles = ['Title one', 'title Two', 'Title three'];
const images = [ 'http://picsum.photos/300/300', 'http://picsum.photos/250/350', 'http://picsum.photos/250/250' ];

setInterval(() => {
  const titleSelected = titles[currentIndexTitle];
  img.setAttribute('src', images[currentIndexTitle]);
  title.innerText = titleSelected;
  currentIndexTitle = (currentIndexTitle + 1) % titles.length;
}, 5000);

#container {
  position: relative;
  display: inline-block;
}
.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
}
.mask .title {
  color: #FFF;
  font-weight: bold;
}

<div id="container">
  <img class="myImage" src="http://picsum.photos/400/500"/>
  <div class="mask">
    <div class="title">Title one</div>
  </div>
</div>

auto-resize 一个 'div' 容器来适应图像？

auto-resize a 'div' container to fit the image?

css

containers

resize

image