通过对象适合将Div附加到全屏居中图像的角落：包含

Question

我正在尝试在全屏/居中/适合图像的左下边缘附加一个“信息div”。

图像必须适合屏幕尺寸（就像css属性object-fit: contain一样），信息div应该附加在图像的左下方。

这是我的css尝试（甚至没有结束），这是三个图像来描述所需的行为！

注意：我正在寻找纯CSS解决方案，所以请不要使用JS！

编辑：将全屏图像的div附加到另一个div的角，没有预定义的大小/全屏。

* {
  margin: 0;
  padding: 0;
}

#out {
  
}

#in {

}

#info {
  background-color: red;
  color: white;
  display: inline-block;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

img {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

<div id="out">
  <div id="in">
    <img src="https://images.unsplash.com/photo-1501630834273-4b5604d2ee31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
    <div id="info">This is the image info!</div>
  </div>
</div>

Answer 1

如果我对您的理解正确，那么您是否正在寻找类似的东西？全屏打开它，调整页面大小，在其中放置不同的图像，欢呼。

div {
  border: red 1px dashed;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

div:after {
  content: attr(data-overlay);
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: white;
  font-size: 2rem;
}

img {
  object-fit: contain;
  height: 100vh;
  width: 100wh;
}

<div data-overlay="TEXT TEXT TEXT">
  <img src="https://images.pexels.com/photos/1498923/pexels-photo-1498923.jpeg"/>
</div>

Answer 2

将图像包装在将成为信息div相对父级的div中。

i

section {
  display: flex; /* centers everything in the section */
  flex-direction: column;
  align-items: center;
}

.image-wrap {
  display: inline-block; /* keeps the wrapper div the same size as the child image */
  position: relative; /* for positioning the info div */
}

.image-info {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 18px;
  text-transform: uppercase;
  color: white;
}

Answer 3

您需要使用视口单元 为此，您需要设置div的大小。＃out 宽度：100vw；高度：100vh