2 

.container {
  display: flex
}

.image {
  max-width: 100%;
  height: 100%
}

.videotext {
  padding: 50px;
  color: white;
  align-text: center;
  background-color: blue;
  width: 50%;
  max-width: 100%;
}

img {
  width: 100%;
  vertical-align: top;
  object-fit: contain;
  height: 100%
}

.image p {
  font-weight: bold;
  left: 2%;
  top: 25%;
  color: white;
  background-color: blue;
  padding: 20px;
  position: absolute;
  height: 20px;
}
<div class="container">
  <div class="image">
    <img src="http://i.imgur.com/aYlD4AC.png">
    <p> asdf </p>
  </div>
  <div class="videotext">
    <p>Lorum ipsum
    </p>
  </div>
</div>

请向我展示不同的示例或更有效的方式来显示这两个 div。有没有办法在没有 flex 的情况下做到这一点？

此外，我正在尝试对图像进行对象拟合，但它似乎不起作用......

编辑：我也忘了添加，如何让它们在某个断点处相互叠加显示？

请看这个例子：https ://codepen.io/zadro/pen/WJjRVd

4

0 回答 0