html - 试图让图像适合盒子和盒子以响应

Question

我正在尝试让这段代码正常工作，我已经完成了大约 90%，但在缩放和使 flexbox 响应时遇到困难。 我想知道的是:

1) 当我在第 20 行(还有第 44 和 68 行)将宽度更改为自动时，为什么图像消失了？我希望图像适合框，文本覆盖在图像上。

2) 如何让图像框响应？在 Mobile 中，我希望它们堆叠起来，然后在它们到达桌面时 flex ，以便它们排成一排。所以列到行。为什么那不起作用？

任何有助于使图像适合框和文本覆盖以覆盖图像并使其 flex 和响应的帮助都会有所帮助。我已经坚持了很长一段时间，不知道为什么这不起作用。
Code Pen link

HTML

<div class="opener-wrapper">

  <div id="opener1" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lorem Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>
  <div id="opener2" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lore Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>
  <div id="opener3" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lorem Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>

</div>

CSS

.opener-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.opener {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

#opener1::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener1::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener2::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener2::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener3::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener3::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

.flex-center {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;  */
}

.opener-msg {
  color: #fff;
  text-shadow: #343a40 2px 2px;
  min-width: 100%;
  min-height: 12em;
  position: relative;
  margin: 3% 0;
  text-transform: uppercase;
}

.opener-msg::before {
  content: "";
  display: block;
  position: absolute;
  margin-left: 0;
  min-width: 100%;
  min-height: 12em;
  z-index: -1;
  opacity: 0.4;
  background-color: #343a40;
}

.opener-title,
.opener-subtitle {
  width: 100%;
  display: block;
  text-align: center;
}

.opener-title {
  margin: 3% 0;
}

Answer 1

1) When I change the width to auto on line 20 (also 44, and 68) why does the image disappear? I want image to fit in box and the text overlay to be over image.

此框设置为 position: absolute。绝对定位元素的大小相对于它们的父容器(或下一个相对定位的父容器)。它们需要宽度和高度。

如果您在 #opener1 上设置 background-image，并在 #opener1::after 上设置颜色叠加，会怎样？

2) How do I get the image box to be responsive? When in Mobile I want them stacked and then to flex as they get to desktop so they are in row. So column to row. Why is that not working?

您需要在 flex 容器上将 flex-direction 设置为 row。当前没有在 .opener-wrapper 上设置 flex-direction。这将使盒子水平流动。此外，您将 min-width 设置为 100%。这将确保您的盒子占据 100% 的宽度——这不是您想要的。删除此行，并添加 max-width: 33.33%;。

您可能想看看 Chris Coyier 的 A Complete Guide to Flexbox如果你还没有!